Question

我正在使用JQuery .animate()方法来动画div的增长，而动画正在播放/动画，我想每x个毫秒进行一次函数调用直到动画已经完成了。

progress选项似乎可以完成这项工作，但它只执行一次，而不是间隔执行，但还没有尝试多个progress选项，但我不想要沿着这条路走下去，因为我可能有一个运行10秒的动画和一个每100毫秒调用一次的功能。

Answer 1

要执行此操作，您可以使用step对象的options属性。但请注意，它会在动画的每次迭代中执行一次。这不能保证在调用之间设置为ms，因为它取决于很多因素，例如动画的速度，客户端PC可以多快地呈现更改等。这是一个有效的例子：

$('.foo').animate({ left: 300 },{ duration: 3000, step: function() { console.log($(this).css('left')) } });

.foo { position: absolute; top: 30px; left: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="foo">Foo</div>

或者，您可以在动画开始时启动间隔计时器，并在动画结束时将其清除，如下所示：

var $foo = $('.foo'); $('button').click(function() { var interval = setInterval(update, 100); $foo.animate({ left: 300 }, 3000, function() { clearInterval(interval); }); }); function update() { console.log($foo.css('left')); }

.foo { position: absolute; top: 30px; left: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="foo">Foo</div> <button>Start</button>

Answer 2

您可以使用clearInterval()

<button>Button</button>
<div style = "background-color :black; height:100px; width: 100px; ">Div</div>



$("button").click(function(){
    var myVar = setInterval(function() {
        console.log("Happening...");
        // whatever you want to do here
    },100);
    $("div").animate({
            opacity: 0,
        }, 5000, function() {
            clearInterval(myVar);
        }
    );
}); 
</script>

如何在$（）。animate动画时继续调用函数？

2 个答案: