Définir une valeur maximale pour augmenter la marge lorsque vous déplacez un div sur le bouton cliquez avec jquery

Question

J'ai deux boutons. Lorsque vous cliquez dessus, ils se déplacent un div haut et en bas:

Lorsque le bouton est cliqué div se déplace vers le bas, je veux mettre en place une valeur max

$('.button_down').click(function() { 
    $('.whole_car_body').animate({ 
     marginTop : "+=2px" 
    }); 
}); 

Lorsque le bouton est cliqué div se déplace, je veux mettre en place une valeur max

$('.button_up').click(function() { 
    $('.whole_car_body').animate({ 
     marginTop : "-=2px" 
    }); 
}); 

Je veux définir une valeur maximale est atteinte alors quand la marge devrait cesser d'augmenter/diminuer. Je vous remercie.

Answer 1

Cela fonctionne parfaitement.

var maximumDivIncrease = 6; 
var currentDivIncrease = 0; 
$('.button_up').click(function() { 
    if(currentDivIncrease < maximumDivIncrease) { 
     currentDivIncrease += 2; 
     $('.whole_car_body').animate({ 
      marginTop : "-=2px" 
     }); 
    } 
}); 

var minimumDivIncrease = -6; 
$('.button_down').click(function() { 
    if(currentDivIncrease > minimumDivIncrease) { 
     currentDivIncrease -= 2; 
     $('.whole_car_body').animate({ 
      marginTop : "+=2px" 
     }); 
    } 
}); 

Answer 2

Il y a plusieurs façons de procéder. Une manière relativement simple serait d'utiliser une variable pour "compter" et une variable pour stocker le maximum. i.e. .:

var maximumDivIncrease = 50; 
var currentDivIncrease = 0; 
$('.button_up').click(function() { 
    if(currentDivIncrease < maximumDivIncrease) { 
     currentDivIncrease += 2; 
     $('.whole_car_body').animate({ 
      marginTop : "-=2px" 
     }); 
    } 
}); 

De cette façon, il vérifiera la première variable, et si elle est inférieure au maximum, il augmentera, sinon il ne fera rien. Pour le faire pour le bouton bas, il suffit de diminuer le montant et ajouter un minimum aussi.