Question

当左边距为1200px时，我想停止setInterval（）。我的代码是： -

<html>
<body>
<script src="jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('#btn').click(function () {
            var i = setInterval(function () {
                $('img').animate({
                    'margin-left': '+=100px'
                }, 'fast');
                var a = $('img').css('margin-left');
                if (a == "1200px") {
                      clearInterval(i);
                }
            }, 50);
        });
    });
</script>
<img src="48_800[1].jpg" height="50px" width="50px"><br>
<input type="button" value="start" id="btn"><br>
</body>
</html>

它不起作用。任何人都可以帮助我吗？

Answer 1

您应该将像素值a = parseInt(a);转换为整数。（正如您之前获得带有小数的margin-left的值，例如99.45px然后199.45px，因此它跳过100px）

Live example

var i = setInterval(function () {

    $('img').animate({
        'margin-left': '+=100px'
    }, 'fast');
    var a = $('img').css('margin-left');
    a = parseInt(a);
    if (a >= 100) {
        clearInterval(i);
    }
}, 50);

的更新

<小时/> 我刚刚注意到间隔被清除后动画仍在运行。不确定为什么会发生这种情况，但我找到了一种方法来解决问题，方法是在变量中缓存最终边距，而不是在动画中计算它。

Live example 2

请注意，在示例中我使用>=100来查看结果。

Answer 2

试试这个：

if(parseInt(a) >= 1200)
{
     clearInterval(i);
}
},50);

Answer 3

请改用：Updated

$(document).ready(function () {
    $('#btn').click(function () {
        var i = setInterval(function () {
            $('img').animate({
                'margin-left': '+=100px'
            }, 'fast');
            var a = $('img').css('margin-left');
            //console.log(a.substring(0,a.lastIndexOf('px')));
            if (a.substring(0,a.lastIndexOf('px')) >= 1200) {
                  clearInterval(i);
            }
        }, 50);
    });
});

Answer 4

$(document).ready(function () {
    $('#btn').click(function () {
        var a="";
        while(a != "1200px"){
          $('img').animate({
                'margin-left': '+=100px'
            }, 'fast');
            a = $('img').css('margin-left');
      }
    });
});

您现有的代码看起来很错误，除了不需要引用SetInterval之外，使用体态while子句本身也可以实现相同的目的。

快乐编码：）

Answer 5

尝试将时间值更改为setInterval方法

数值必须以毫秒为单位

遇到特定条件时停止setInterval（）

5 个答案: