Question

如果这个问题是微不足道的，但是对于编写脚本是一个新手，请提前道歉，我想知道我怎样才能＆＃34; .finish（）＆＃34;一个当前正在执行的动画，它不在DOM元素上调用（例如div元素），而是在数组对象上调用动画？

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

以下是一个例子：

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

非常感谢您的回应

Answer 1

好的，所以这里有一个解决方案：

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

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

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

在animate的步骤回调函数中，然后输入以下行

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

if(stopAnimation){ $(this).stop( true, true ); }解释如下。

第一个真正清除队列，最后一个真正跳转到结尾动画队列，有效地结束动画。

这是一个示例，单击停止加载程序按钮以停止加载程序。

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

希望有所帮助！

Answer 2

如果我理解正确，你将摆脱匿名对象，而不是给它一个名字。然后，通过点击按钮将其访问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为＆＃34;数组对象设置动画＆＃34;

2 个答案: