Question

当我按下“停止”时，我需要动画停止并返回其原始位置（起点）。到目前为止，我只能暂停动画。

我的jQuery

var timer;

    $(document).ready(function () {

        $('#start').click(function () {
            timer = setInterval(function () {
                $("#animate").animate({ 'marginLeft': '200px' }, 400)
                $("#animate").animate({ 'marginTop': '200px' }, 400)
                $("#animate").animate({ 'marginLeft': '10px' }, 400)
                $("#animate").animate({ 'marginTop': '0px' }, 400)
                console.log('Success');
            }, 100);

        });
        $("#stop").click(function () {
            clearInterval(timer);
            console.log('Trigger!!');
        });
    });

My Fiddle

Answer 1

您可以使用此代码。

? super Number

您可以检查最后一个动画何时完成，并将标志设置为true。当该标志为true并且动画完成时，只需删除div的style属性即可。开始新动画时，再次将标志设置为false。

这里是fiddle

让我知道它是否对您有用。

Answer 2

您的代码正确，问题出在计时上，您可以看到您对每个动画应用了400毫秒，并且其间隔仅为100毫秒，因此动画功能在一秒钟内调用了太多次。

解决方案：只需将间隔时间增加到2000毫秒即可停止动画播放。或更多，然后（400 X 4 = 1600）

var timer;

$(document).ready(function () {

    $('#start').click(function () {
        timer = setInterval(function () {
            $("#animate").animate({ 'marginLeft': '200px' }, 400)
            $("#animate").animate({ 'marginTop': '200px' }, 400)
            $("#animate").animate({ 'marginLeft': '10px' }, 400)
            $("#animate").animate({ 'marginTop': '0px' }, 400)
            console.log('Success');
        }, 2000);

    });
    $("#stop").click(function () {
        clearInterval(timer);
        console.log('Trigger!!');
    });
});

body {
    border: 1px solid blue;
    width: 237px;
    height: 263px;
}

div {
    margin: 7px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="start">Start</button>
<button id="stop">Stop</button>
<div id="animate"></div>

附加说明：

您可以使用jquery链将所有4步合为一个，从而减少编码：

$("#animate").animate({ 'marginLeft': '200px' }, 400).animate({ 'marginTop': '200px' }, 400).animate({ 'marginLeft': '10px' }, 400).animate({ 'marginTop': '0px' }, 400);

jQuery-Break setInterval并重置为其原始位置

2 个答案: