jQuery Effect: остановить анимацию

Последнее обновление 21 сентября 2018 11:13:52 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Эффект jQuery: упражнение 2 с решением

Остановить анимацию.
Пример данных :

HTML код:

 <Тело>
<button id = "btn1"> Запустить анимацию </ button>
<button id = "btn2"> Остановить анимацию </ button>
<div id = "box" style = "background: # 5858FA; высота: 100px; ширина: 100px; поле: 6px;"> </ div>  
</ Body>

Решение :

HTML-код:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Stop an animation</title>
</head>
<body>
<button id="btn1">Start Animate</button>
<button id="btn2">Stop Animate</button>
<div id="box" style="background:#5858FA;height:100px;width:100px;margin:6px;"></div>  
</body>
</html>

Код JavaScript:

$("#btn1").click(function(){
        $("div").animate({height: 250}, 1200);
        $("div").animate({width: 250}, 1200);
        $("div").animate({height: 75}, 1200);
        $("div").animate({width: 75}, 1200);
    });
   $("#btn2").click(function(){
        $("div").clearQueue();
    });

Примечание. При вызове метода .clearQueue () все функции в очереди, которые не были выполнены, удаляются из очереди.

Демонстрация в реальном времени:

См. Pen jquery-effect-упражнение-2 от w3resource ( @ w3resource ) в CodePen .

Внесите свой код и комментарии через Disqus.

Предыдущий: Анимируйте элемент, изменяя его высоту и ширину.
Далее: установите таймер для задержки выполнения последующих элементов в очереди.