JQuery оживить до состояния

Question

У меня есть следующий код для перемещения product-details-content div на 100% каждый раз, когда я нажимаю на product-prev-button. Этот код работает отлично, за исключением того, что он продолжает прокручиваться навсегда. Я хочу, чтобы он остановил прокрутку, когда marginLeft больше, чем -400%. Могу ли я ввести условие где-нибудь, чтобы заставить его работать?

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

Answer 1

Просто используйте счетчик ...

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 ... 
    }); 
}); 

Answer 2

$("#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%' 
       }); 
      } 

      });    
     }); 

Answer 3

Я мог заставить его работать, делая небольшую 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%' 
     }); 
    } 
});    

});