jQuery, называя обратный вызов только однажды после нескольких анимаций
Скажем, то, что у меня есть несколько анимаций, работающих сразу, и я хочу вызвать функцию, после того как все они закончены.
Только с одной анимацией это легко; существует обратный вызов для этого. Например:
$(".myclass").fadeOut(slow,mycallback);
Проблема, если мой селектор найдет несколько объектов, то обратный вызов назовут для каждого из них.
Обходное решение не слишком трудно; например:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $mc=$(".myclass"),l=$mc.length;
$mc.fadeOut("slow",function(){
if (! --l) $("#target").append("<p>All done.</p>");
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<p class="myclass">Paragraph</p>
<p class="myclass">Paragraph</p>
<p class="myclass">Paragraph</p>
<p class="myclass">Paragraph</p>
<p class="myclass">Paragraph</p>
<p class="myclass">Paragraph</p>
<div id="target"></div>
</body>
</html>
Мой вопрос: существует ли лучший способ сделать это?
2 ответа
Вы можете запустить один и тот же обратный вызов для всех из них, но выполнить предложение if только в том случае, если ни один из них больше не анимируется, например:
$(".myclass").fadeOut("slow", function() {
if ($(".myclass:animated").length === 0)
$("#target").append("<p>All done.</p>");
});
Это просто проверяет, анимируются ли какие-либо еще через селектор : animated .
Если вы анимировали много разных вещей, используйте ту же концепцию, просто добавьте к селектору вот так:
$(".myclass:animated, .myClass2:animated")
Если вы его используете во многих местах я бы сделал этот обратный вызов функцией onFinish или чем-то еще, чтобы привести его в порядок.
В моем случае я должен определить
if ($(".myclass:animated").length === 1)