理順一個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或更多，導致它停止，並且在鼠標再次移動之前它不會繼續。如果允許代碼在鼠標右移中心時運行，則動畫會很好地排隊。