平滑 jQuery 过渡

Question

我有以下代码：

<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 以找到最大索引，但我不确定。

Answer 1

从第一个 if 语句中删除 && visibleRows == 7，或将其更改为 && visibleRows >= 7，可以解决该问题。

当其中一个窗格处于转换状态时，visibleRows 评估为 8 或更多，这会导致它停止，并且在再次移动鼠标之前不会继续。如果允许代码运行随着鼠标向右移动，动画会很好地排队。

平滑 jQuery 过渡

Smooth out a jQuery transition

html

javascript

css

jquery

jquery-animate