2011-12-12 4 views
1

J'ai une image de robot que j'essaie de déplacer vers la gauche, hors écran, avec JQuery. Le div est positionné comme ceci:Jquery animation - sauts div?

#robot{ 
    position:fixed; 
    margin-left:800px; 
    bottom:-40px; 
} 

Ainsi, il est essentiellement au milieu en bas. Puis j'anime:

$('#robot').animate({left:"-=1000px"},12000,"linear", stopRobotTimer); 

Il fonctionne, mais dès que l'Animer commence, le robot saute sur les 200 pixels left puis commence l'animation de 12sec.

+1

Regardez si vous avez un bourrage/une marge qui vous gêne. Consultez cet article pour plus d'informations sur ce type de problème: http://jqueryfordesigners.com/animation-jump-quick-tip/. – JesseBuesking

Répondre

0

avez-vous essayé de définir le point final attendu littéralement?

$('#robot').animate({left:"-200px"},12000,"linear", stopRobotTimer); 

vous faites - = ce qui devrait juste donner -200 dans ce cas, car il est défini dans votre css.

EDIT

Mon erreur - j'oublié de vous mentionner soit devriez changer votre delclaration css à gauche: 800px; OU modifiez votre instruction animée pour qu'elle soit:

$ ('# robot'). Animate ({marginLeft: "- 200px"}, 12000, "linear", stopRobotTimer);

la cause d'abord votre code CSS ne précise pas « gauche » au lieu spécifié « marge gauche »

0

Lorsque vous utilisez -=1000, d'abord vous changer le left ensuite commencer à animer. Essayez de le changer comme ci-dessous

$('#robot').animate({left:"=-200px"},12000,"linear", stopRobotTimer);