Animation de la propriété margin

Croquelajeunesse
Javascript

Bonjour,

J'ai dans ma page un block qui a pour propriété margin: auto;. J'aimerais en Javascript le faire sortir de la page avec une animation. Pour ça, j'ai fait:

$("#div").animate ({marginLeft: "2000px"}, 1000);

L'animation se fait bien, mais juste avant de partir vers la droite, mon block se repositionne tout à gauche de la page, comme si jQuery annulait les valeurs de la propriété margin avant d'assigner les nouvelles. J'ay essayé de mettre ceci avant ma ligne d'animation:

$("#logo-wrap").css("margin-left", $("body").css('width')/2);

Pour fixer la valeur de margin-left, mais ça ne change rien.

Quelqu'un sait-il comment faire?

9 réponses

Croquelajeunesse
Auteur
Réponse acceptée

J'ai finalement la solution, c'est la propriété .css(width) qui posait problème. Il fallait mettre .width(). J'ai donc le code suivant:

$("#div").css("margin-left", ($("body").width()-$("#div").width())/2).animate ({marginLeft: 3000}, 1000);
mespeche

$("#div").animate({marginLeft: $(this).offsetLeft+2000+"px"}, 1000);

Si tu essayes ceci ?

Croquelajeunesse
Auteur

Salut,

Ton code ne marche pas. J'ai fait ça:
$("#div").animate({marginLeft: $(this).offset().left+2000+"px"}, 1000);

Et j'ai toujours le même problème.

agrafik

Après avoir appliqué l'effet JS il faut peut-être stopper les animations en cours. Explication sur le stop ici : LIEN.
? Dis moi si ça marche.

Croquelajeunesse
Auteur

Non, j'ai essayé $("#div").stop(); avant et après ma ligne d'animation, ça ne marche pas. J'ai aussi mis:
$("#div").stop().animate();

Mais, rien ne change :(.

agrafik

Normalement (enfin pour ma part) je met toujours le stop() derrière le animate pour mes animations. ce qui aurait ici donné :

$("div").stop().animate({marginLeft(this).offset().left+2000+"px"},1000);
Croquelajeunesse
Auteur

C'est ce que j'ai essayé, et ça ne change rien.

agrafik

Bisard car généralement il e nfaut un :/ . Faut que tu te renseigne sur l'animation des positions, tu sauras comment faire ( suis le lien que je t'ai donné peut-être que t'auras de l'aide , je pense ^^ )

agrafik

Sympa d'avoir partagé ta solution elle sera utie à d'autre j'espère, si tu as réglés le soucis, appuis sur le petit icône vers pour valider ta réponse :)