Сделать элемент не кликаемым во время анимации

Question

Я пытаюсь сделать элемент не кликабельным, когда он анимирован. Когда анимация закончится, я хочу, чтобы она снова стала кликабельной. Я долго искал какую-то помощь, как этого добиться, но не могу заставить ее работать, и я не знаю почему.

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 / Оскар

Answer 1

Ваша проверка выполняется только при загрузке страницы. Выполните проверку внутри функции щелчка:

$('#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() устарела; рассмотреть вопрос о переходе на ().

Answer 2

Более экономичным является присоединение всего одного обработчика щелчков с внутренним ветвлением для учета различных обстоятельств; пересылать анимацию, переворачивать анимацию и отклонять во время анимации.

Вы также можете обойтись без 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(),