jQuery Transit animation overlapping

Question

I have a problem with overlapping transitions - one transition starts before the previous one gets to end.

$obj.stop(true, false).transition({'-webkit-transform': 'translateX(' + (pos)  + 'px)', 'width':width + 'px'},  1500 );

JsFiddle example: http://jsfiddle.net/s4r88/18/.

If you hover the buttons quickly enough you'll see the animation 'jumps' to its final settings without the transition. I've tried using .stop() and .clearQueue() methods to no avail.

I know there are other ways to achieve this (jQuery.animate(), writing static css), but I think there must be a way to solve this within jQuery.transitions.

Any ideas?

Answer 1

jQuery transition will chain animations by default. So, just don't use any stop() method as you did in your code. Actually stop() is not supposed to work with transition().

_$blackLine.transition({'-webkit-transform': 'translateX(' + (pos)  + 'px)', 'width':width + 'px'},  1500 );// without stop() method

http://jsfiddle.net/s4r88/24/

The caveat is that if you're hovering all menus, all animations will play one after the other. As a sidenote, there are some pull requests/forks of jQuery Transit that adds stop() functionnality : https://github.com/rstacruz/jquery.transit/pulls

Answer 2

This is an old thread so you may not have the issue anymore, but for anyone who comes here via search, you're problem is stacking animations and an animation that's too slow.

If you avoid stop() and just use clearQueue() and then drop the animation time from 1.5 seconds to 400ms, the issue seems to be resolved.

_$blackLine.clearQueue().transition({'-webkit-transform': 'translateX(' + (pos)  + 'px)', 'width':width + 'px'},  400 );

See fiddle here: http://jsfiddle.net/2abg1cn5/