Edit Question - KnowledgeHub

Title Body

I have been using the following to detect the end of a CSS3 transition, like so:- CACHE.previewControlWrap.css({ 'bottom':'-217px' }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () { CACHE.songWrap.css({ 'bottom': '0' }); }); This works perfectly, a CSS transition takes place, then when it completes, another takes place. However when I nest this anonymous function down to a third level, it does not work. The third transition 'end' event is fired at the same time as the second, instead of chaining them one after another (as would happen with jQuery .animate()) What I would like to do is tie the 'transitionend' event to a 'specific' element. Currently it seems to look for a transitionend event on any element and fires accordingly. If not, is there another workaround so that I can have three successive css transition events queued up all firing after the previous one completes. Thanks in advance. Below is the code that is causing the issue:- 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%'

Tags (comma-separated) Cancel