jquery - 如何一个接一个地执行另一个jquery动画？

Question

所以我想拍一张照片，然后向左移动 10px 和顶部 10px，然后向左移动 -10px 和顶部 -10px。

以下代码演示了我到目前为止所拥有的。我究竟做错了什么？

演示

$(document).ready(function() {
    $('#floating_island').animate({
        'left': '10px',
        'top': '10px'
    },500,'linear',function(){
        'right': '10px',
        'top': '-10px'
    });
});

Answer 1

在动画完成回调函数中，您需要animate()使用所需的参数再次调用

$(document).ready(function () {
    $('#floating_island').animate({
        'left': '10px',
        'top': '10px'
    }, 500, 'linear', function () {
        $(this).animate({
            'right': '10px',
            'top': '-10px'
        }, 500)
    });
});

演示：小提琴

Answer 2

您还可以链接.animate()，例如：

$(document).ready(function() {
    $('#floating_island').animate({
        'left': '10px',
        'top': '10px'
    },500,'linear').delay(500).animate({
        'right': '10px',
        'top': '-10px'
    },500);
});

演示:: jsFiddle

Answer 3

你可以像这样链接它们......

$(document).ready(function() {
    $('#floating_island').animate({
        left: '+=10',
        top: '+=10'
    },500,'linear').animate({
        left: '-=10',
        top: '-=10'
    },500,'linear');
});