jQuery: ошибка кликов и клонов

Question

Нажмите на ссылку, затем я хотел бы выполнить анимацию после клонирования элемента.Но у меня неожиданные результаты.Для проверки: http://jsfiddle.net/r4BVb/3/

При многократном нажатии ссылки (например, выродка) клон выполняется много раз.

$('#clone').click(function(){
    $('.view_right').clone().prependTo('.overflowed');
    $('.view_right:last').css('display', 'none');
    $('.view_right:first').hide('slide', { direction: 'left' }, 300, function() {
        $('.view_right:last').show('slide', { direction: 'right' }, 300, function() {
           $('.view_right:first').remove();
        });
    });
});

Как я могу решить эту проблему?Спасибо

Answer 1

Ваш код добавит множество клонов в view_right, поэтому я советую проверить, что вы не добавляете слишком много таких слов:

if($('.view_right').length < 2) {

И результат будет http://jsfiddle.net/r4BVb/7/

Answer 2

Проверьте это: Использование .one ()

Я фактически повторно связываю щелчок после анимации и слушаю событие щелчка только один раз.

Answer 3

Вот решение:

var called = false;

$('#clone').click(function(){
    if (called) {
        return;
    }
    called = true;

    $('.view_right').clone().prependTo('.overflowed');
    $('.view_right:last').css('display', 'none');
    $('.view_right:first').hide('slide', { direction: 'left' }, 300, function() {
        $('.view_right:last').show('slide', { direction: 'right' }, 300, function() {
           $('.view_right:first').remove();

            called = false;

        });
    });
});

Проверьте это