Question

有没有办法在jQuery中执行以下操作：

将DIV动画设为left: -200px; top: -200px
将DIV动画设为left: 0px; top: -400px
将DIV动画设为left: -200px; top: -600px
转到1，重复直到某些用户事件中断

Answer 1

我没有完全遵循您想要的确切尺寸，但您可以填写所需的值。这是一般的想法。 jQuery动画进入队列并自然地一个接一个地链接，所以你可以将它们全部关闭然后将它们排队，然后使用最后一个上的完成函数重新启动它，如下所示：

function go() {
    $("#box")
        .animate({left: "100px", top: "0"}, 1000)
        .animate({left: "400px", top: "0"}, 1000)
        .animate({left: "400px", top: "400px"}, 2000)
        .animate({left: "100px", top: "400px"}, 2000, go);

}

go();

$("#stop").click(function() {
    $("#box").stop(true);
});

$("#start").click(go);

您可以通过调用动画对象上的jQuery .stop(true)方法随时停止动画。这是一个有效的演示：http://jsfiddle.net/jfriend00/PnzQ9/

Answer 2

这会有效，但您不会在http://jsfiddle.net/rQCz7/3/中看到任何内容，因为它在视口之外。也许你会得到一些关于如何完成它的提示。

var div = $("div");

function animate(){
    div.animate({left: -200, top: -200}, 5000)
        .animate({left: 0, top: -400}, 5000)
        .animate({left: -200, top: -600}, 5000, animate);
}
animate();

Answer 3

要使用某个用户事件停止动画，您可以执行以下操作：

$('#stop_link').click(function() {
    $('#box').stop(true, true);
    return false;
});

有关停止方法的详细信息，请转到http://api.jquery.com/stop/

重复动画序列直到被打断的方法？

3 个答案: