Jquery animate «объект массива»

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" /> 

Затем создайте глобальную переменную, которая может использоваться для проверки необходимости остановки анимации. Также привяжите событие click к вашей кнопке, которая устанавливает значение этой переменной в true.

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

В функции обратного вызова шаг одушевленных затем поместить следующую строку

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

$(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" />

Надеется, что это помогает.