jQuery動畫bug：重複

Question

我正在爲我的網絡應用程序的登錄頁面工作，而且我正在使用某種我構建的模式框。 它使用一些jQuery來顯示框本身和覆蓋。 在同一頁面上有3個模式框，每個框可以打開一個鏈接。

我的代碼工作得很好（即使它看起來很重[我不是一個贊成Javascript的人，但我總是儘可能地嘗試]）。但是，當我關閉模式框時，疊加層按照其應該滑動的方向滑動，但動畫重複3次（可能是因爲3模式框的代碼）。

所以，我的代碼是完全網上有→http://graphix.net23.net/app/

這裏的的jsfiddle你玩:)→http://jsfiddle.net/EY59T/（錯誤是不是真的可見，你只能看到覆蓋需要一段時間才能脫身）

我已經試過.stop（）函數。當你顯示第一個模態時，它解決了這個問題，但是當你點擊另一個模態時，疊加層不會到來。

看看我重碼：

// iOS Modal 
$("a#modal-open").click(function() { 
     $("div#modal-ios").show("fade", 600); 
     $("div.modal-overlay").show("slide", 300); 
     $(".app h4").hide("fade", 300); 
     $("div.app").animate({backgroundPositionY:-120}, 600); 
     return false; 
}); 
$("a#modal-done,div.modal-overlay").click(function() { 
     $("div#modal-ios").hide("fade", 600); 
     $("div.modal-overlay").hide("slide", 300); 
     $(".app h4").show("fade", 600); 
     $("div.app").animate({backgroundPositionY:0}, 600); 
     return false; 
}); 
$(document).on('keydown', function (e) { 
    if (e.keyCode === 27) { 
     $("div#modal-ios,div.modal-overlay").hide("fade", 300); 
     $(".app h4").show("fade", 300); 
     $("div.app").animate({backgroundPositionY:0}, 600); 
    } 
}); 
// END iOS Modal 
// Android Modal 
$("a#modal-open-android").click(function() { 
     $("div#modal-android").show("fade", 600); 
     $("div.modal-overlay").show("slide", 300); 
     return false; 
}); 
$("a#modal-done,div.modal-overlay").click(function() { 
     $("div#modal-android").hide("fade", 600); 
     $("div.modal-overlay").hide("slide", 300); 
     return false; 
}); 
$(document).on('keydown', function (e) { 
    if (e.keyCode === 27) { 
     $("div#modal-android,div.modal-overlay").hide("fade", 300); 
    } 
}); 
// END Android Modal 
// WP Modal 
$("a#modal-open-wp").click(function() { 
     $("div#modal-wp").show("fade", 600); 
     $("div.modal-overlay").show("slide", 300); 
     return false; 
}); 
$("a#modal-done,div.modal-overlay").click(function() { 
     $("div#modal-wp").hide("fade", 600); 
     $("div.modal-overlay").hide("slide", 300); 
     return false; 
}); 
$(document).on('keydown', function (e) { 
    if (e.keyCode === 27) { 
     $("div#modal-wp,div.modal-overlay").hide("fade", 300); 
    } 
}); 
// END WP Modal​ 

它已經兩天，我正在努力呢，仍然無法找到一個有效的解決方案，幫我請:)

編輯：你可以關閉模式有三種不同的方式：點擊按鈕，點擊覆蓋或ESC鍵。請注意，該錯誤不會發生與ESC鍵。

Answer 1

問題是，你綁定關閉處理程序三次爲每種類型的模型打開。但你綁定那些相同的元素a#modal-done,div.modal-overlay。通過這種方式，當你點擊它時，它會在相同的元素上開始3次淡入淡出。

您只需要應用一次處理程序，並在其中添加所有彈出窗口的淡入淡出。

還加入了通用類到你的鏈接，用於打開彈出窗口，你可以針對那些在單次以及

這將簡化您的代碼

// method to hide any open popup and the overlay 
function closePopupOverlay() { 
    // hide all popups - will only really work with the currently open one 
    $("#modal-ios,#modal-wp,#modal-android,div.modal-overlay").hide("fade", 500); 

    $(".app h4").show("fade", 500); 
    $("div.app").animate({ 
     backgroundPositionY: 0 
    }, 600); 
} 
$(document).on('keydown', function(e) { 
    if (e.keyCode === 27) { 
     closePopupOverlay(); 
    } 
}); 
$("a#modal-done,div.modal-overlay").click(function() { 
    closePopupOverlay(); 
    return false; 
}); 
// when we click on one of the links 
$('.model-open').click(function() { 
    var target = this.id.replace('-open-', '-'); // find the related popup id 
    $('#' + target).show("fade", 600); // show the related popup 
    $("div.modal-overlay").show("slide", 300); // show the overlay 

    if (target === 'modal-ios') { // handle the special needs of the ios button 
     $(".app h4").hide("fade", 300); 
     $("div.app").animate({ 
      backgroundPositionY: -120 
     }, 600); 
    } 

    return false; 
}); 

的HTML變化是我加入class="model-open"你的3個環節，也改變了id爲iOS鏈接modal-open-ios與其他兩個符合，所以我們可以很容易地提取我們要開什麼彈出..在

演示http://jsfiddle.net/EY59T/1/

Answer 2

這是發生，因爲你是隱藏疊加3次（每一次平臺[的iOS，安卓，WP]）

你的代碼需要一些清潔。您在頁面上使用了多個相同ID的元素（例如＃modal-close），這是無效的，不確定是否有其他實例。我想在這裏做的是每個平臺的創建和對象，在開始時指示一切並從那裏運行。

但是，你可以修改你得到的東西，但添加一個隱藏功能。我嘲笑起來這裏：http://jsfiddle.net/3sz2u/1/

我已經改變了a#modal-close到a.modal-close

希望這有助於！只測試了Chrome上

---

注意：您創建的jsfiddle不顯示監守你正在使用的版本相同的效果。切換到jQuery 1.7.2，你會看到它:)