jQuery圖像使用導航上下滑動

Question

我有3個屏幕快照，它們使用絕對位置進行了負面定位。 現在，在頁面的下面，我有一個包含3個錨標簽的導航，分別對應於上述畫廊中3個屏幕截圖的每個。

當我將鼠標懸停在它們上方時，我希望使用導航錨鏈接將相關圖像向上滑動（當然，當前活動的屏幕截圖會向下滑動）。

我有以下語法。

HTML

<ul id="gallery">
<li><img src="./index_files/window1_841x461px.png"></li>
<li><img src="./index_files/window2_841x461px.png"></li>
<li><img src="./index_files/window3_841x461px.png"></li>
</ul>

JS

$("ul#gallery li:first").css({bottom: '0'}).addClass("on");
$("#featureList a:first").addClass("on");   

$("#featureList a").hover(function() {

    if ($(this).hasClass("on")) {

    }
    else {

        $("#featureList a.on").removeClass("on");

        var item = $(this);
        var item_index = $(this).index();

        item.addClass("on");

        $("ul#gallery li.on").stop().animate({bottom: '-400px'}, function() {
            $(this).removeClass("on");
            $("ul#gallery li").eq(item_index).stop().animate({bottom: '0'}).addClass("on");
        });

    }

});

這似乎工作得很好-僅有一個小故障-如果我在導航控件上徘徊並持續不停地盤旋，整個事情就會失去同步，基本上什么也沒出現。 救命！！！！！！

Answer 1

我已經成功使用jQuery .stop（）防止動畫過度排隊。 它可能會幫助您。

http://api.jquery.com/stop/