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

以下是解决方案：

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;

        });
    });
});

Test it

Answer 2

你的代码会在view_right中添加很多克隆，所以我建议你检查一下你是不是要添加太多这样的克隆：

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

结果将是http://jsfiddle.net/r4BVb/7/

Answer 3

检查出来：Using .one()

我在动画后有效地重新点击了点击，并且只听了一次点击事件。

jQuery：点击并克隆bug

3 个答案: