Прерывание анимации
Если для одного элемента назначено несколько анимаций, то по умолчанию они выполняются по очереди. Пока не закончилась первая анимация, вторая не начнется. В случае, если анимация применена к разным элементам, то она будет выполняться одновременно. Для досрочного прерывания анимации предназначен метод stop(). Формат метода:
Если параметры не указаны, то прерывается только текущая анимация. Иными словами, если в очереди несколько анимаций, то текущая анимация прервется и сразу начнется следующая.
Параметр <Очистка очереди> позволяет очистить очередь анимаций. Для этого необходимо указать значение true. Тогда прервется не только текущая анимация, но и все остальные.
В случае применения метода stop() без указания параметра <Завершение анимации> текущая анимация будет прервана и объект остановится в промежуточном состоянии. Если необходимо, чтобы анимация была сразу завершена и объект находился в конечном состоянии, тогда во втором параметре необходимо указать значение true.
Пример использования метода stop() приведен в листинге 7.5.
Листинг 7.5. Прерывание анимации
<html>
<head>
<title>Прерывание анимации</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(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 px, а если увеличивалась, то ее значение станет равно 450 px.
 |
 |
 |