jquery動畫，直到滿足條件

我有以下代碼移動product-details-content div 100%每次我點擊product-prev-button。此代碼工作正常，除了它始終滾動。我想讓它在marginLeft大於-400%時停止滾動。我可以在某處引入條件以使其正常工作嗎？jquery動畫，直到滿足條件

$(document).ready(function(){ 
    $("#product-prev-button").click(function(){ 
     $("#product-details-content").animate({ 
      marginLeft: '-=100%' 
     }); 
    }); 
});

來源

2015-07-01 SKB

只需用一個計數器...

var MAX_CLICKS = 4; 

$(function() { 
    var clickCounter = 0; 

    $("#product-prev-button").click(function() { 
     // only move -100% if we are under or at 4 clicks (-400%) 
     if (++clickCounter <= MAX_CLICKS) { 
      $("#product-details-content").animate({ 
       marginLeft: '-=100%' 
      }); 
     } 

     // do other stuff regardless ... 
    }); 
});

來源

2015-07-01 08:32:22 usandfriends

JavaScript中沒有'const'或者它是ES6規範... –

是的，我在那個ES6炒作抱歉：/ – usandfriends

$("#product-prev-button").click(function(){ 
      var value = parseInt($("#product-details-content").css('margin-left'));         
      console.log(value); 
      if(value > -400) 
      { 
       $("#product-details-content").animate({ 
        marginLeft: '-=100%' 
       }); 
      } 

      });    
     });

來源

2015-07-01 08:52:26 MGA

這隻適用於第一次點擊。然後停下來。 – SKB

默認情況下，.animate會運行400毫秒，所以當您第一次點擊時，它會將邊距設置爲小於-400％。所以第二次如果條件失敗。爲了測試它，將初始的margin-left值設置爲更高的值，比如2000，並且看到動畫停止，直到它到達，動畫不會在這些值之間停止，因爲它在步驟中發生，所以它將完成步驟並且該步驟可以設置剩餘邊距小於-400％ – MGA

或者減少動畫值使其自帶一個-400。假設初始邊距爲0，則設置marginLeft：' - = 30％'，這將使其達到-405。最接近你所需要的。 – MGA

我能得到它做輕微modicifation由「MGA」提供的代碼工作。

$(document).ready(function(){ 
$("#product-prev-button").click(function(){ 
    var prevvalue1 = parseInt($("#product-details-content").css('margin-left')); 
    var prevvalue2 = parseInt($("#product-details-content").outerWidth()); 
    var prevvalue=-(prevvalue1/prevvalue2); 
    if(prevvalue < .75) 
    { 
     $("#product-details-content").animate({ 
     marginLeft: '-=100%' 
     }); 
    } 
});

}）;

來源

2015-07-01 12:10:14 SKB

jquery動畫，直到滿足條件

回答

相關問題