Сделать элемент не кликаемым во время анимации
Я пытаюсь сделать элемент не кликабельным, когда он анимирован. Когда анимация закончится, я хочу, чтобы она снова стала кликабельной. Я долго искал какую-то помощь, как этого добиться, но не могу заставить ее работать, и я не знаю почему.
HTML:
<p>
<span class="red" id="a">A</span><span id="llright" class="hide">llright</span> B C D
</p>
При нажатии на букву A она перемещается влево, а затем рядом с ней появляется какой-то текст.
JQuery:
(function() {
var letterA = $('#a'),
llright = $('#llright');
$('#a:not(.open)').live('click', function() {
letterA.animate({
marginRight: "5.7in",
}, 1300, function() {
letterA.addClass('open');
llright.fadeIn(1300); // Animation complete.
});
});
$('#a.open').live('click', function() {
llright.fadeOut(700);
letterA.delay(700).animate({
marginRight: "0.0in",
}, 700, function() {
letterA.removeClass('open');
});
});
})();
Анимация прекрасно работает, но это не так:
if(letterA.is(':animated')) {
letterA.unbind('click');
};
Последняя часть не работает вообще, даже когда я вставляю простой alert() вместо unbind(), кажется, что он не определяет, когда A движется и нет.
Я мог бы действительно использовать некоторую помощь здесь, я перепробовал все, что мог придумать.
Thx / Оскар
2 ответа
Ваша проверка выполняется только при загрузке страницы. Выполните проверку внутри функции щелчка:
$('#a:not(.open)').live('click', function() {
if(!letterA.is(':animated')) {
letterA.animate({
marginRight: "5.7in",
}, 1300, function() {
letterA.addClass('open');
llright.fadeIn(1300); // Animation complete.
});
}
});
Кроме того, live() устарела; рассмотреть вопрос о переходе на ().
Более экономичным является присоединение всего одного обработчика щелчков с внутренним ветвлением для учета различных обстоятельств; пересылать анимацию, переворачивать анимацию и отклонять во время анимации.
Вы также можете обойтись без addClass/removeClass('open'), протестировав состояние llright
вместо.
Примерно так должно это сделать:
$('#a').on('click', function() {
var $this = $(this),
llright = $this.next("span");
if($this.is(":animated") || llright.is(":animated")) {
return;//reject (no action)
}
if(llright.is(":visible")) { //reverse animation sequence
llright.fadeOut(700, function(){
$this.animate({
marginRight: 0,
}, 700);
});
}
else {
$this.animate({ //forward animation sequence
marginRight: "5.7in",
}, 1300, function() {
llright.fadeIn(1300);
});
}
});
Обратите внимание, что с этим кодом нет необходимости использовать .live()
,