How to determine the end of a CSS transition on a “specific” element when multiple transitions occur?

Question

I used the following to determine the end of a CSS3 transition, for example: -

CACHE.previewControlWrap.css({ 'bottom':'-217px' }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () { CACHE.songWrap.css({ 'bottom': '0' }); }); 

This works great, the CSS transition happens, and then when it completes, something else happens.

However, when I set this anonymous function to the third level, it does not work. The third end transition event is fired at the same time as the second, instead of binding them one by one (as happens with jQuery.animate ())

What I would like to do is bind the transition event to the 'specific' element. Currently, it seems to be looking for a transition event to any element and is triggering accordingly. If not, is there another workaround so that I can have three consecutive css transition events queued for all firing after completing the previous one.

Thanks in advance.

The following is the code causing the problem: -

 if(Modernizr.csstransitions){ CACHE.leftcolbottom.css({ 'left':'-230px' }); CACHE.songwrap.css({ 'left':'100%', 'right': '-100%' }); CACHE.previewControlWrap.css({ 'bottom':'-217px' }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () { CACHE.songWrap.css({ 'bottom': '0' }); CACHE.middle.css({ 'bottom': '350px' }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () { CACHE.slidewrap.css({ 'left': '50%', 'right': '0%' }); CACHE.leftcoltop.css({ 'left': '0%' }); }); }); } 

Answer 1

Ok, I really found the answer myself, hope this helps someone else with the same problem.

The solution is to use the standard jQuery.on () method, rather than the one-time .one () method. Then check the target to see if the element associated with this event is associated, and finally remove the event handler within the same anonymous function.

Makes the "third" nested jump code look like in my case: -

 }).on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function (e) { if($(e.target).is(this)){ CACHE.slidewrap.css({ 'left': '50%', 'right': '0%' }); CACHE.leftcoltop.css({ 'left': '0%' }); $(this).off('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd'); } }); 

If anyone else has a more elegant solution, let me know and I will give you the appropriate answer.