Question

I’m trying to sequence some animations using jQuery and css transitions. It seems like the container width should animate until after the widget is done transitioning from the ‘top’ css change, but they are firing together.

Why does

        widget.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(i) {

            widget.css({'top': top});

            widget.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(i) {

                container.css({'width': "19%"})

            });

        });

Animate in the same sequence as this?

        widget.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(i) {

            widget.css({'top': top});

        });

        widget.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(i) {

            container.css({'width': "19%"})

        });

Answer 1

In your first example you need to set the css before adding the transitionEnd event. I believe this is where you are going wrong.

widget.css({
    'top': '200px'
}).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

    widget.css({
        'top': '0px'
    }).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

        container.css({
            'width': "300px"
        }).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

            container.css({
                'width': "50px"
            }).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (i) {

                widget.css({
                    'width': "400px"
                })

            });
        });

    });

});

Chaining transitions works fine as long as you use one instead of on with jQuery.

See this jsFiddle:

http://jsfiddle.net/gordyr/NSCd5/3/

I’m not sure if you’re doing something different, but hopefully this will help.

Though personally I would wrap this up into a helper function to avoid writing so much browser specific code… Something like this (not tested):

$.fn.transition = function(props, callback){
              $(this).css(props).one('webkitTransitionEnd otransitionend oTransitionEndmsTransitionEnd transitionend', function (i) {
                    if(typeof callback == 'function'){
                            callback();
                    }
              });
        return this;
});

Used like so:

$(element).transition({top:'0px'}, function(){
      $(this).transition({top:'100px'}, function(){
          $(this).transition({top:'400px'}, function(){
               //Do something else
          });
    });
});

Though with cached elements rather than taking the hit of $(this) everytime of course…