0

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

    }

});

这似乎工作正常 - 有一个小故障 - 如果我在导航控件上持续不断地悬停，整个事情就会失去同步，基本上什么都不会出现。帮助！！！！！！

4

1 回答 1

0

我已经成功使用 jQuery .stop() 来防止动画过度排队。它可能会帮助你。

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

于 2013-08-06T23:08:10.137 回答