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，所以我做了一些調查。

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

然后在＃flipper.flipper-h元素上調用die。 這應該銷毀所有現場活動。

之后，您在＃flipper.flipper-h元素上創建了一個實時事件，這意味着存在的和將要存在的所有元素都將發生此事件。

現在，首先單擊：左動畫：發生-267，然后回調將#flipper變為＃flipper.flipper-h，然后將實時事件綁定到新的＃flipper.flipper-h，

第二次單擊：左動畫：發生了-267，但它已經在那里，所以什么也沒發生，然后#flipper變成＃flipper.flipper-h回調，所以什么也沒有發生，現在事件仍在冒泡，所以剩下第二個動畫： 600毫秒（這可能是您的凍結）之后觸發0，現在回調刪除.flipper-h

現在，我不知道您的Ajax的工作原理如何，但是die函數似乎永遠從#flipper中刪除實時事件。 因此無法再觸發...

die功能不能防止起泡。 它刪除實時事件。 return false或event.stopPropagation可以