javascript - jQuery 画像は nav を使用して上下にスライドします

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");
        });

    }

});

これは問題なく動作しているように見えます - 1 つのマイナーな不具合があります - ナビゲーション コントロールの上に激しくホバリングし続けると、全体の同期が失われ、基本的に何も表示されません。ヘルプ！！！！！！