jQuery 动画和实时事件

Question

我使用 AJAX 加载页面。该页面包含以下代码（对于 div 的移动动画，#1 将其向左移动，#2 将其再次向后移动）

#1 
$('#flipper').click(function () { 
      $(".l-l").animate({ "left": -267 }, 600, function () {
             $('#flipper').addClass('flipper-h'); 
       });
});

#2
$('#flipper.flipper-h').die(); //to prevent .live() event bubbling. I guess
$('#flipper.flipper-h').live('click', function () { 
    $(".l-l").animate({ "left": 0 }, 600, function () {
            $('#flipper').removeClass('flipper-h'); 
    });
});

使用该代码我有一些问题：

1) 第一页加载后，代码#2 在动画开始前有一点卡顿

2) 在第二个（以及更多）页面加载后，#2 代码不会触发。为什么？

编辑

我注意到代码 #2 被无限次调用（这很奇怪）。但是，我已经通过代码修复了 1) 的情况：

$('#flipper').click(function () {
        if(!$(this).hasClass('flipper-h')) {
                $(".l-l").animate({ "left": -267 }, 600, function () {
                $('#flipper').addClass('flipper-h');
            }); 
        } else {
            $(".l-l").animate({ "left": 0 }, 600, function () {
                $('#flipper').removeClass('flipper-h');
             });
       }
});

但问题 2) 仍未解决。有什么想法吗？

Answer 1

EDIT3：考虑这两个代码：

http://jsfiddle.net/2zEZT/2/

http://jsfiddle.net/2zEZT/3/

在第一个示例中，当您使用删除按钮时，元素会被删除，其中的元素看起来相同，但实际上并非如此。事件丢失。

在第二个中，元素被删除，但点击事件在此之后再次绑定......

EDIT2：根据您的编辑，尝试改用此功能。它可以表现得更好......

$('#flipper').click(function () {
    if ($(this).hasClass('flipper-h')) {
        $(this).removeClass('flipper-h');
        $(".l-l").animate({
            "left": 0
        }, 600);
    } else {
        $(this).addClass('flipper-h');
        $(".l-l").animate({
            "left": -267
        }, 600);
    }
});

编辑：我建议你仍然使用 jQuery 1.7，所以我做了一些调查。

首先，您将事件 onclick 放在#flipper 上。

然后你在#flipper.flipper-h 元素上调用die。这应该破坏所有现场活动。

之后，您在#flipper.flipper-h 元素上进行了实时事件，这意味着所有存在和将要存在的元素都会有此事件。

现在首先点击： 动画左侧：-267 发生， 然后回调将#flipper变成#flipper.flipper-h， 然后将直播事件绑定到新的#flipper.flipper-h，

第二次点击： 动画左侧：-267 发生，但它已经存在，所以什么都没有发生 然后回调确实#flipper变成#flipper.flipper-h，所以什么也没有发生， 现在事件仍在冒泡，所以剩下的第二个动画：600ms 后触发 0（这可能是你的冻结） 现在回调删除 .flipper-h

现在我不知道您的 ajax 究竟是如何工作的，但似乎 die 函数会永远从 #flipper 中删除实时事件。所以不能再触发了……

die 函数不能防止冒泡。它会删除实时事件。 return false 或 event.stopPropagation 会