JQuery的動畫播放速度較慢每個調用

Question

我有一個模式框，我用Jquery打開。當關閉按鈕被調用時，模式框被關閉。一切工作正常，但更多的我打開和關閉模式對話框，它需要對模式對話框的時間越長，收：

window.closeModal = function() { 
    modal = $("div.modal-overlay"); 
    windowHeight = $(window).height(); 
    // Until here performance is good 
    modal.animate({top: windowHeight, }, 800, function() { 
     // This is the problem 
     modal.hide(); 
     $("body").css("overflow-y", "scroll"); 
    }); 
} 

我已經把控制檯日誌的每一行，並立即執行的一切，直到我打modal.animate函數。每次我打開一個模式，然後按下關閉按鈕，它需要更多時間，直到modal.animate開始執行。

任何人都可以請一些光。

@EDIT： 我創建了一個顯示問題的jsfiddle。

只要按開模態，然後關閉模態。執行此4-5次看到延遲做大

http://jsfiddle.net/CZ54C/

@@編輯：很奇怪的東西發生。

雖然openModal的一次，iframe.load執行＃倍模式的開啓和關閉...

window.openModal = function (url) { 
    console.log("open start"); 
    modal = $("div.modal-overlay"); 
    modalIframe = $("div.modal-overlay iframe"); 
    windowHeight = $(window).height(); 
    modal.css("bottom", "0"); 
    modalIframe.attr("src", url + "?frame=true"); 
    modalIframe.load(function() { 
     console.log("open load") 
     modalIframe.css('height', windowHeight); 
     modal.show().animate({ 
      top: 0, 
     }, 800, function() { 
      $("body").css("overflow-y", "hidden"); 
     }); 
    }); 
} 

Answer 1

我想我解決了這個問題，執行

看來，通過改變iframe url，「負載處理程序再次連接」。所以每次「負荷運行的時間，它是連接我用這個代碼解決它？

modalIframe.one('load',function() {}); 

//Instad of 
modalIframe.load(function() {}); 

這是很好的做法

Answer 2

的問題是，你正在連接新load處理程序每次打開模態對話框時都會彈出modalIframe，所以如果你第二次點擊「打開模式」，加載回調將被執行兩次，在下一次點擊時會執行三次，依此類推。

解決此問題的最佳方法是將負載事件處理程序移出openModal函數i n要在那裏你附上你的點擊處理相同的塊：

Working Demo

$(function() { 
    var modal = $("div.modal-overlay"), 
     modalIframe = modal.find('iframe'); 

    $("a.open").click(function (e) { 
     e.preventDefault(); 
     var href = $(this).attr("href"); 
     openModal(href); 
    }); 

    $("a.close").click(function (e) { 
     e.preventDefault(); 
     closeModal(); 
    }); 

    //put load handler here 
    modalIframe.load(function() { 
     var windowHeight = $(window).height(); 

     modalIframe.css('height', windowHeight); 
     modal.show().animate({ 
      top: 0, 
     }, 800, function() { 
      $("body").css("overflow-y", "hidden"); 
     }); 
    }); 
}); 

window.openModal = function (url) { 
    $("div.modal-overlay iframe").attr("src", url + "?frame=true"); 
} 

window.closeModal = function() { 
    modal = $("div.modal-overlay"); 
    windowHeight = $(window).height(); 
    modal.animate({ 
     top: windowHeight, 
    }, 800, function() { 
     modal.hide(); 
     $("body").css("overflow-y", "scroll"); 
    }); 
}