理顺一个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

我想在右侧的动画像左侧动画一样光滑。如何才能做到这一点？我认为它在右边减速的原因是因为它遍历所有的LIs以便找到最大的索引，但我不确定。

Answer 1

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

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