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"); 
    }); 
}