我有以下代码:
<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>
我想让右边的动画和左边的动画一样流畅。如何才能做到这一点?我认为它在右侧变慢的原因是因为它循环遍历所有 LI 以找到最大索引,但我不确定。
最佳答案
从第一个 if 语句中删除 && visibleRows == 7
,或将其更改为 && visibleRows >= 7
,可解决该问题。
当其中一个 Pane 处于转换状态时,visibleRows
的计算结果为 8 或更多,这会导致它停止,并且在再次移动鼠标之前不会继续。如果允许代码在鼠标向右移动时运行,动画就会很好地排队。
关于javascript - 平滑 jQuery 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33506663/