Как остановить анимацию animate jQuery

При применении метода animate библиотеки jQuery к элементу несколько раз анимация не срабатывает параллельно, а образовывается так называемые стек анимаций — анимация выполняется последовательно в порядке применения метода animate.

Что делать если этот метод был многократно применён и анимация выполняется и выполняется. И её надо остановить.

Нужно очистить очередь анимации этого элемента следующим образом:

$('#el').queue("fx", []);

1 2	$('#el').queue("fx", []);

Таким образом мы остановим анимацию, дав выполниться текущему animate.
Ну и небольшой примерчик.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
	<title>Останавливаем анимацию animate jQuery</title>

	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
	type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {
	for (var i = 0; i < 50; i++) {
		$('#bl1').animate(
			{top: 50, left: 50,
			width: 500, height: 400},
			1000
		);

		$('#bl1').animate(
			{top: 50, left: 10,
			width: 20, height: 490},
			1000
		);

		$('#bl1').animate(
			{top: 55, left: 23,
			width: 345, height: 123},
			1000
		);
	}

	$('#stop-link').bind('click', function () {
		$('#bl1').queue("fx", []);
		return false;
	});

});

</script>

<style type="text/css">
#bl1 {
	position: absolute;
	background: maroon;
	width: 300px;
	height: 300px;
	left: 40%;
	top: 40%;

}
</style>

</head>
<body>

		<a href="#" id="stop-link">остановить анимацию</a>

		<br /><br />
		<div id="bl1">
		</div>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Останавливаем анимацию animate jQuery</title>

type="text/javascript"></script>

$(document).ready(function () {

for (var i = 0; i < 50; i++) {

$('#bl1').animate(

{top: 50, left: 50,

width: 500, height: 400},

1000

);

$('#bl1').animate(

{top: 50, left: 10,

width: 20, height: 490},

1000

);

$('#bl1').animate(

{top: 55, left: 23,

width: 345, height: 123},

1000

);

}

$('#stop-link').bind('click', function () {

$('#bl1').queue("fx", []);

return false;

});

</script>

#bl1 {

position: absolute;

background: maroon;

width: 300px;

height: 300px;

left: 40%;

top: 40%;

}

</style>

</head>

<body>

<a href="#" id="stop-link">остановить анимацию</a>

</div>

</body>

</html>

Если вкратце описать, то тут для блока в цикле задаётся куча анимаций. При клике по ссылке анимация останавливается.
Ещё нагляднее тут.

21.12.2011 23:19

Comment (RSS) | Обратная ссылка

Понравилось? Поделись с другими плз

Комментарии ВКонтакте

Комментарии с сайта

Оставить комментарий