如何执行另一个jquery动画？

Question

因此，我想拍摄一张图像，并向左移动10px和移动到顶部10px，然后移动到左侧-10px和顶部-10px。

下面的代码演示了我到目前为止的内容。我究竟做错了什么？

DEMO

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

Answer 1

在动画完成回调函数，你需要用所需的参数

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

演示再次调用animate()：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'); 
});