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>

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

    }

});

这似乎工作得很好 - 有一个小故障 - 如果我在导航控制器上徘徊，并且连续地徘徊整个事物失去了它的同步并且基本上没有出现。 HELP !!!!!!

Answer 1

我已成功使用jQuery .stop（）来防止动画过度排队。它可能会对你有帮助。

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

jQuery Image使用nav上下滑动

1 个答案: