Question

我一直在玩链式动画，这让我很困惑

我只有一个元素被动画，但“摇晃”效果留在队列的底部。

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

在线简化版：http://jsfiddle.net/ottoln/F9xfD/3/

不能理解为什么......任何人？

他可能想要链接的小提琴： http://jsfiddle.net/ottoln/F9xfD/

Answer 1

在那里投入promise() & done()，以确保在继续动画之前完全解析fx：

$('#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);   
});

示例：http://jsfiddle.net/niklasvh/MtkaY/

Answer 2

effect方法与其他动画调用的排队方式不完全相同，但它将回调作为参数，该参数将在效果完成后运行。你可以这样做：

$('#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);
});

示例：http://jsfiddle.net/CCw9U/

奇怪的动画队列

2 个答案: