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动画，直到满足条件

回答

相关问题