我有以下代码:
<script>
$(document).ready(
function()
{
var middleIndex = 3;
var maxIndex = $("ul li").length - 1;
var minIndex = 0;
$('ul#reel li').mouseover(function()
{
var index = $(this).parent().children().index(this);
var tempIndex;
var showIndex;
var visibleRows = $("ul li:visible").length;
if(index > middleIndex && visibleRows == 7)
{
tempIndex = middleIndex - 3;
showIndex = middleIndex + 4;
if(tempIndex <= maxIndex && showIndex <= maxIndex)
{
$("ul li:eq("+tempIndex+")").hide(500);
$("ul li:eq("+showIndex+")").show(500);
middleIndex++;
}
}
else if(index < middleIndex)
{
tempIndex = middleIndex + 3;
showIndex = middleIndex - 4;
if(tempIndex <= maxIndex && showIndex >= minIndex)
{
$("ul li:eq("+tempIndex+")").hide("slow");
$("ul li:eq("+showIndex+")").show("slow");
middleIndex--;
}
}
});
});
</script>
JSFIDDLE
我希望右侧的动画与左侧的动画一样平滑。如何才能做到这一点?我认为它在右侧变慢的原因是因为它遍历所有LI以找到最大索引,但是我不确定。
最佳答案
从第一条if语句中删除&& visibleRows == 7
或将其更改为&& visibleRows >= 7
,可以解决此问题。
当其中一个窗格处于过渡状态时,visibleRows
的计算结果等于或大于8,这将导致其停止,并且直到再次移动鼠标后,它才会继续。如果允许代码在鼠标向右移动时运行,则动画会很好地排队。