Question

我试图通过增加左侧的位置使div向右滑动，我希望它从左侧向右侧缓慢移动，然后循环回到开始位置。目前我只是试图为位置设置动画，因此它不会立即跳跃 -

$('#pig').css('left', 200).animate(300);

Answer 1

语法是

$('#pig').animate({left: 200}, 300);

jQuery.animate documentation

要在队列中添加动画，您可以将它们链接起来

$('#pig').animate({left: 200}, 300).animate({left: 0}, 300);

FIDDLE

或使用回调参数，或使用jQuery的队列在队列中设置任意数量的动画

$('#pig').queue(function() {
    $(this).animate({left: 200}, 300);
    $(this).animate({left: 0}, 300);
}).dequeue();

FIDDLE

或为了使其递归，您可以使用两者的组合

(function ani() {
    $('#pig').queue(function() {
        $(this).animate({left: 200}, 300);
        $(this).animate({left: 0}, 300, ani);
    }).dequeue();
}());

FIDDLE

Answer 2

Adeneo的回答是正确的，但你也要求回到开始。假设您希望div返回其原始位置，您需要链接另一个动画：

$('#pig').animate({left: 200}, 300, function() {
  $('#pig').animate({left: 0}, 300);
});

Answer 3

setTimeout(function () {
    $('#pig')
        .css('left', 200)
        .animate(300)
}, 1000)

jQuery动画留下了一段时间

3 个答案: