Weird animation queue

I've been playing around with chained animations, and this has baffled me quite a lot

I have just one element being animated, but the 'shake' effect is left to the bottom of the queue.

.animate().animate().effect('shake',{times:3},10).animate()....

online simplified version: http://jsfiddle.net/ottoln/F9xfD/3/

can't quite understand why...anyone?

the fiddle he probably meant to link: http://jsfiddle.net/ottoln/F开发者_运维问答9xfD/

Throw in a promise() & done() in there, to make sure that the fx is fully resolved before continuing your animation:

$('#bunda').animate({
    marginTop: '+=200',
    marginLeft: '+=150'
}, 1300).animate({
    marginTop: '-50',
    marginLeft: '+=100',
    'background-color': 'darkred'
}, 1000).effect('shake', {
    times: 3
}, 50).promise().done(function(){
 $(this).animate({
    marginTop: '+=300'
}, 500);   
});

example: http://jsfiddle.net/niklasvh/MtkaY/

The effect method doesn't queue up exactly like the rest of the animate calls, but it takes a callback as a parameter which would be run after the effect is finished. You can do this instead:

$('#bunda').animate({
    marginTop: '+=200',
    marginLeft: '+=150'
}, 1300).animate({
    marginTop: '-=50',
    marginLeft: '+=100',
    'background-color': 'darkred'
}, 1000).effect('shake', {
    times: 3,
}, 50, function () {
    $('#bunda').animate({
        marginTop: '+=300'
    }, 500);
});

Example: http://jsfiddle.net/CCw9U/