Метод прерывания анимации

Если для одного элемента назначено несколько анимаций, то по умолчанию они выполняются по очереди. Пока не закончилась первая анимация, вторая не начнется. В случае, если анимация применена к разным элементам, то она будет выполняться одновременно. Для досрочного прерывания анимации предназначен метод stop(). Формат метода:


stop ( [<Очистка очередu> [, <3авершение анимациu>] ] )

Если параметры не указаны, то прерывается только текущая анимация. Иными словами, если в очереди несколько анимаций, то прервется текущая анимация и сразу начнется следующая.
Параметр <Очистка очередu> позволяет очистить очередь анимаций. Для этого необходимо указать значение true. Тогда прервется не только текущая анимация, но и все остальные.
В случае применения метода stop() без указания параметра <3авершение анимациu> текущая анимация будет прервана и объект остановится в промежуточном состоянии. Если необходимо, чтобы анимация была сразу завершена и объект находился в конечном состоянии, тогда во втором параметре необходимо указать значение true.

Листинг 7.5. Прерывание анимации
<html>
<head>
<title>Прерывание анимации</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#btn1").click(function() {
if ($("#chc1").is(":checked")) {
$("#div1").stop().animate({ width: "0.1px" }, 3000);
}
else {
$("#div1").animate({ width: "0.1px" }, 3000);
}
});
$("#btn2").click(function() {
if ($("#chc1").is(":checked")) {
$("#div1").stop().animate({ width: "450px" }, 3000);
}
else {
$("#div1").animate({ width: "450px" }, 3000);
}
});
$("#btn3").click(function() {
$("#div1").stop();
});
$("#btn4").click(function() {
$("#div1").stop(true);
});
$("#btn5").click(function() {
$("#div1").stop(true, true);
});
});
//-->
</script>
<style>
.cls1 {
position:absolute;
top:50px;
left:10px;
width:450px;
height:100px;
background-color:black;
}
</style>
</head>
<body>
<input type="checkbox" id="chc1" checked> Прерывание анимации
<input type="button" value="Скрыть" id="btn1">
<input type="button" value="Отобразить" id="btn2">
<input type="button" value="Остановить" id="btn3">
<input type="button" value="Остановить все" id="btn4">
<input type="button" value="Остановить все и завершить"
id="btn5"><br>
<div id="div1" class="cls1"><div>
</body>
</html>

Если щелкнуть на кнопке Скрыть, а затем, не дожидаясь окончания анимации, щелкнуть на кнопке Отобразить, то при установленном флажке текущая анимация будет прервана и начнется новая. Если флажок сбросить, то следующая анимация будет выполнена только после окончания предыдущей.
Чтобы увидеть различные нюансы применения метода stop (), сбросьте флажок и несколько раз щелкните на кнопках Скрыть и Отобразить, чтобы создать очередь анимаций. Если теперь щелкнуть на кнопке Остановить, то текущая анимация будет прервана и сразу начнется следующая. Если щелкнуть на кнопке Остановить все, то текущая, а также все остальные анимации будут прерваны и объект остановится в промежуточном положении. Щелчок на кнопке Остановить все и завершить вызовет не только прерывание всех анимаций, но и полностью завершит текущую. Например, если ширина уменьшалась, то она сразу станет равна 0,1 рх, а если увеличивалась, то ее значение станет равно 450 рх.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *