search

heygrady / transform

jQuery 2d transformation plugin
437 stars 87 forks source link

Repeated animations #21

Closed matthew-dean closed 13 years ago

matthew-dean commented 13 years ago

In CSS3, if I have an animation on hover, to, say, rotate 90 degrees, and I interrupt that animation by moving the mouse away, then hover again before it animates back to zero, then the animation will start from the current position.

Like so:

  1. Start animating on hover to 90 degrees.
  2. Move mouse away at 60 degrees, starts to move back to zero.
  3. Move mouse back over element at 45 degrees, the animation now restarts, animating from 45 to 90 degrees.

In your library, what happens instead is that the animation still continues back to zero, but starts a new animation in a queue. That means that if I move my mouse over an element repeatedly, it will start a sequence of unstoppable animations. Is there a way to fix this?

matthew-dean commented 13 years ago

Never mind, I figured out with this line!

$(this).stop().animate({rotate: '-20deg', scale: [1.2, 1.2]}, 'fast', 'easeInOutQuad');

The stop() function did it for me, plus I changed the demo from "-=20deg" to "-20deg". Awesome!!