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)
    });
});

演示：Fiddle

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

如何执行另一个jquery动画？

3 个答案: