Question

I’m using jQuery to create animations of an image object. I would like the object to follow a square pattern based off points I have. What I’m currently doing is having four animations, just going point to point and they have the same duration. I want this to appear to be continuous, but there is a delay going from animation to animation.

Is there anyway to make it continuous as it goes from animation to animation and have no delay during the transitions?

Answer 1

The issue is probably due to the default easing method in jQuery being swing not the more evenly paced linear. You should be able to change the easing to linear and get what you want:

$("#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');