[Функция] stop(clearQueue, gotoEnd)
Раздел "Effects"
Функция останавливает выполнение текущей анимации для всех подходящих элементов.
Параметры
stop(clearQueue, gotoEnd)
1.2
clearQueue: (true/false), если установлен true, то значит очищает очередь анимации, эффективно прекращая всю анимцию поставленую в очередь.
gotoEnd : (true/false), если установлен true вызывает текущую анимацию к немедленному выполнению, включающую сброс оригинальных настроек стилей к свойствам show и hide и вызов функции callback.
Описание
Если несколько анимации поставлены в очередь (и аргумент clearQueue не возвращает true), функция будет выполнена немедленно.
Примеры
Пример:
Нажмите кнопку Go, чтобы запустить анимацию, затем нажмите кнопку STOP, чтоб остановить анимацию в том месте, где она находится в текущий момент. Другой вариант - нажмите нескольких кнопок создав очередь анимации, и намлюдайте как функция stop прекращает текущую анимацию.
"jQuery"
// Start animation
$("#go").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});
// Stop animation when button is clicked
$("#stop").click(function(){
$(".block").stop();
});
// Start animation in the opposite direction
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});
"HTML"
<button id="go">Go</button> <button id="stop">STOP!</button> <button id="back">Back</button> <div class="block"></div>
"CSS"
div {
position: absolute;
background-color: #abc;
left: 0px;
top:30px;
width: 60px;
height: 60px;
margin: 5px;
}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ // Start animation $("#go").click(function(){ $(".block").animate({left: '+=100px'}, 2000); }); // Stop animation when button is clicked $("#stop").click(function(){ $(".block").stop(); }); // Start animation in the opposite direction $("#back").click(function(){ $(".block").animate({left: '-=100px'}, 2000); }); }); </script> </head> <body class="iframe"> <button id="go">Go</button> <button id="stop">STOP!</button> <button id="back">Back</button> <div class="block"></div> </body> </html> <style> div { position: absolute; background-color: #abc; left: 0px; top:30px; width: 60px; height: 60px; margin: 5px; } </style>
Версия jQuery 1.4.2
Документ создан 2010-08-21