一旦達到最大寬度，如何停止動畫

Question

我正在製作一個滑塊，當用戶鼠標位於箭頭上方時，它可以連續移動。它可以工作，但即使內容已經結束，它也會繼續移動。

如何使其停止，以便在查看所有幻燈片後前/後運動被禁用，或者當他們查看第一張幻燈片時不能倒退？

我的代碼如下 - 打開其他方法來實現這種類型的滑塊，如果我有什麼是不好的。

  $(document).ready(function() { 
       var timer; 

       $("#leftarrow").hover(function() { 
        timer = setInterval(function() {slideLeft();}, 50); 
       }, function() { 
        clearInterval(timer); 
       }); 


      $("#rightarrow").hover(function() { 
        timer = setInterval(function() {slideRight();}, 50); 
       }, function() { 
        clearInterval(timer); 
       }); 



      function slideLeft() { 
       $("img#background").stop().animate({ 
        'left': '-=200px' 
       }, 50); 
       $(".mid").stop().animate({ 
        'left': '-=20px' 
       }, 50); 
       console.log('alert'); 

      } 

      function slideRight() { 
       $("img#background").stop().animate({ 
        'left': '-=200px' 
       }, 50); 
       $(".mid").stop().animate({ 
        'left': '+=20px' 
       }, 50); 
      } 


      }); 

這裏是我的滑小提琴：http://jsfiddle.net/rYYDv/

Answer 1

您可以使用一個額外的，如果：

對於向左滑動：

if(($(".mid").position().left) >= -500){ .. } 

對於幻燈片右：

if(($(".mid").position().left) <= -10){ .. } 

缺點：您必須手動處理正確的值。如果圖片不經常變化，這不是問題。

您應該還可以添加其他else以確保正確的最終位置（對於動畫左屬性）。但我認爲你明白了。

http://jsfiddle.net/rYYDv/2/

Answer 2

我沒有足夠的積分，這個帖子上發表評論;因此，我把它寫下來在這裏 -

類似的帖子：How to make the Animate jQuery method stop at end of div?