1

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?

Jeff
  • 12,147
  • 10
  • 51
  • 87
yuvalz
  • 71
  • 5

2 Answers2

0

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

Akaryatrh
  • 532
  • 2
  • 10
  • Hey Akaryatrh, thanks for the reply, however this doesn't solve the problem:It simply queues all animations. If you hover over the categories quickly, the animations will continue to play long after you've stop hovering them. Not the solution I was looking for. – yuvalz Jan 02 '14 at 15:32
  • Well, your problem was "I have a problem with overlapping transitions - one transition starts before the previous one gets to end". This problem is fixed :) And as I've told you, if you want to have a stop() method, you must use a fork of jQuery Transit (maybe this one : https://github.com/rstacruz/jquery.transit/pull/110 ) – Akaryatrh Jan 02 '14 at 16:22
0

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/

Sami Fouad
  • 376
  • 2
  • 9