Comment puis-je animer le sens opposé?

Question

Salutations,

Je modifie la largeur d'un élément qui sert de barre, et cela fonctionne. Cependant, je ne peux pas faire en sorte qu'il l'anime dans la direction opposée. J'ai essayé de mettre - en face de bar_width mais en vain. Largeur sera calculée dynamiquement c'est juste que je veux la direction d'aller vers la gauche plutôt que vers la droite comme si < ------- pas ----------->

var bar_width=$(this).css('width') ; 
$(this).css('width', '0').animate({ width: bar_width }, queue:false,duration:3500,easing: easing}); 

Answer 1

Vous pouvez l'animer de droite à gauche en animant aussi bien la margin-left et width de l'élément en même temps:

CSS

#bar { 
    margin-left: 100px; 
    height: 10px; 
    width: 0; 
    background: red; 
} 

jQuery

$('#bar').animate({ 
    marginLeft: 0, 
    width: 100 
}); 

In action here. En alternative, si votre élément est positionné de manière absolue, vous pouvez animer la propriété left et widthat the same time.

Answer 2

au lieu de 0 vous pouvez utiliser "toggle" comme paramètre, comme ceci:

$(this).animate({ width: "toggle" }, queue:false, duration:3500, easing:easing}); 

"toggle" va animer à partir de son plein largeur 0, et l'inverse la prochaine fois.