jquery - JQuery 水平アコーディオン バナーの絶対配置エラー

Question

次のコードは、JQuery ベースの水平アニメーション システムを操作します。

$(document).ready(function(){
    maxWidth = 700;
    minWidth = 65;
    normWidth = 192;

    var featspos = 0;   

    $('.featuredslider a').each(function(){
        $(this).css('left', featspos+'px');
        featspos += 192; 
    });

     $(".featuredslider a").mouseenter(function(){
         var featscur = $(this).index();
         $('.featuredslider a').each(function(){
            featspos = 0;
            $(this).animate({left: featspos},800);
            if($(this).index() == featscur){ featspos += 700 } else { featspos += 65; };
         });
     });
     $(".featuredslider a").mouseleave(function(){
        $(this).css('left', featspos+'px');
        featspos += 192; 
     });
});

マウスが画像のいずれかに入るとすぐに、すべて左に移動するため、絶対的な配置の問題であると思われる縫い目があります:0px; さらに、それらを元に戻す機能も機能しません。それらは 0px に座っているだけです。

リファレンス FIDDLE をセットアップしたので、これが問題の解決に役立つことを願っています。 http://jsfiddle.net/FzaxF/1/

Answer 1

いくつか変更を加えました: http://jsfiddle.net/mblase75/FzaxF/6/

にあるはず.eachのイベントにループがありました。また、イベントの開始時にゼロにリセットし、アニメーションが完了する前にユーザーがマウスアウトした場合にアニメーションを中断するを追加しました。mouseentermouseleavefeatsposmouseleavestop()

最後に、画像のリセットは、冗長なコードを削除する関数に移動されました。

$(document).ready(function() {
    maxWidth = 700;
    minWidth = 65;
    normWidth = 192;

    function resetter() {
        var featspos = 0;
        $('.featuredslider a').each(function() {
            $(this).stop().css('left', featspos + 'px');
            featspos += 192;
        });
    }
    resetter();

    $(".featuredslider a").mouseenter(function() {
        var featscur = $(this).index();
        featspos = 0;
        $(this).animate({
            left: featspos
        }, 800);
        if ($(this).index() == featscur) {
            featspos += 700
        } else {
            featspos += 65;
        };
    });
    $(".featuredslider a").mouseleave(function() {
        resetter();
    });

});