【发布时间】：2013-08-07 07:08:10
【问题描述】：
我有 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");
});
}
});
这似乎工作正常 - 有一个小故障 - 如果我大力和持续地悬停在导航控件上，整个事情就会失去同步，基本上什么都不会出现。救命！！！！！！
【问题讨论】：
-
能否提供一个 jsfiddle 示例。
-
我的示例很难放入 jsfiddle 中。我有一个网址，但我不能分享它，因为它是公司的东西。
标签： javascript jquery html slide nav