utiliser jQuery .animate pour animer un div de droite à gauche?

J’ai un div absolument positionné en top: 0px et right: 0px , et je voudrais utiliser .animate() de jquery pour l’animer de sa position actuelle à left: 0px . Comment est-que quelqu’un peut faire ça? Je n’arrive pas à faire fonctionner ceci:

 $("#coolDiv").animate({"left":"0px"}, "slow"); 

Pourquoi cela ne fonctionne-t-il pas et comment accomplir ce que je cherche à faire?

Merci!!

Je pense que la raison pour laquelle cela ne fonctionne pas est liée au fait que vous avez la right position, mais pas la left .

Si vous définissez manuellement la left sur la position actuelle, elle semble aller:

Exemple en direct: http://jsfiddle.net/XqqtN/

 var left = $('#coolDiv').offset().left; // Get the calculated left position $("#coolDiv").css({left:left}) // Set the left to its calculated position .animate({"left":"0px"}, "slow"); 

MODIFIER:

Apparaît comme si Firefox se comporte comme prévu car sa position left calculée est disponible en tant que valeur correcte en pixels, alors que les navigateurs Webkit, et apparemment IE, renvoient une valeur auto pour la position gauche.

Comme auto n’est pas une position de départ pour une animation, l’animation fonctionne de 0 à 0. Pas très intéressant à regarder. : o)

Définir manuellement la position gauche avant l’animation, comme ci-dessus, résout le problème.


Si vous n’aimez pas encombrer le paysage avec des variables, voici une belle version de la même chose qui évite la nécessité d’une variable:

 $("#coolDiv").css('left', function(){ return $(this).offset().left; }) .animate({"left":"0px"}, "slow"); ​ 

Cela a fonctionné pour moi

 $("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow"); 

Voici une réponse minimale qui montre votre exemple de travail:

   hello.world.animate()      
HELLO

Réponse originale:

Tu as:

 $("#coolDiv").animate({"left":"0px", "slow"); 

Corrigée:

 $("#coolDiv").animate({"left":"0px"}, "slow"); 

Documentation: http://api.jquery.com/animate/

donc la méthode .animate ne fonctionne que si vous avez atsortingbué un atsortingbut de position à un élément, sinon il n’a pas bougé?

Par exemple, j’ai vu que si je déclare le div mais que je ne déclare rien dans le CSS, il ne prend pas sa position par défaut et ne le déplace pas dans la page, même si je déclare une marge de propriété: xwyz;

Si vous connaissez la largeur de l’élément enfant que vous animez, vous pouvez également utiliser et animer un décalage de marge. Par exemple, cela animera de gauche à droite: 0

CSS:

 .parent{ width:100%; position:relative; } #itemToMove{ position:absolute; width:150px; right:100%; margin-right:-150px; } 

Javascript:

 $( "#itemToMove" ).animate({ "margin-right": "0", "right": "0" }, 1000 );