Comment puis-je chaîner des animations de position en utilisant jQuery sans introduire de délai entre chaque animation?

Question

J'utilise jQuery pour créer des animations d'un objet image. Je voudrais que l'objet suive un motif carré basé sur des points que j'ai. Ce que je fais actuellement, c'est avoir quatre animations, juste aller point à point et elles ont la même durée. Je veux que cela semble être continu, mais il y a un retard allant de l'animation à l'animation. Y a-t-il un moyen de le rendre continu comme il passe de l'animation à l'animation et de ne pas avoir de retard pendant les transitions?

Answer 1

Le problème est probablement dû à la méthode d'accélération par défaut dans jQuery étant swing pas le linear plus uniformément stimulé. Vous devriez être en mesure de changer l'accélération en linéaire et obtenir ce que vous voulez:

$("#myImg").css({top: 0, left: 0}) 
      .animate({top:100, left: 0 }, 1000, 'linear') 
      .animate({top:100, left: 100}, 1000, 'linear') 
      .animate({top:0, left: 100}, 1000, 'linear') 
      .animate({top:0, left: 0 }, 1000, 'linear');