Jquery 动画 "array object"

Question

如果这个问题是微不足道的，但对脚本编写来说是新手，请提前致歉，我想知道如何“.finish()”当前正在执行的动画，该动画未在 DOM 元素上调用（例如div 元素）而是在数组对象上调用动画？

$({countNum: 0 }).animate( {countNum: 100 }, {
  duration: 5000... (code continues)

这是一个例子：

https://jsfiddle.net/AndreasEvans/smzcf1f4/9/

非常感谢期待您的友好回复

Answer 1

好的，这是适合您的解决方案：

首先添加一个html输入按钮：

<input id="stop-animation" type="button" value="stop loader" />

然后创建一个全局变量，可用于检查动画是否需要停止。还将点击事件绑定到您的按钮，将此变量的值设置为 true。

var stopAnimation = false;
$('#stop-animation').click(function(){
    stopAnimation = true;
});

在animate的step回调函数中加入下面这行

if(stopAnimation){
    $(this).stop( true, true );
}

$(this).stop( true, true );解释如下。

The first true clears the queue and the last true jumps to the end of the animation queue, effectively ending the animation.

这里有一个例子，点击停止加载器按钮停止加载器。

https://jsfiddle.net/smzcf1f4/6/

希望对您有所帮助！

Answer 2

如果我理解正确，您将摆脱 anonymous 对象，而是为其命名。然后，单击按钮即可轻松访问 stop();。

片段：

var myObject = {count: 0};
var myButton = document.querySelector('input');
myButton.addEventListener('click', onButtonClick, false);
$(myObject).animate({count: '100'}, {progress: onProgress, duration: 4000});
function onButtonClick(){ $(myObject).stop(true, true); } // or use finish(); if you would like.
function onProgress(){ document.querySelector('div').innerText = myObject.count; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
<input type="button" value="Stop" />

希望对您有所帮助。

Jquery 动画 "array object"

Jquery animate an "array object"

jquery

jquery-animate