爲什麼這個jQuery .animate調用這麼慢？

大家好我有一個非常簡單的功能爲什麼這個jQuery .animate調用這麼慢？

enableModule : function(moduleName){ 
     var module = $('div#'+moduleName); 
     console.log('enabling '+moduleName); 
     console.time('animate'); 
     module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');}); 
     module.find('.disabled_sheild').remove(); 
     module.removeClass('disabled'); 
     console.log('end of enable Module'); 
    }

動畫自身，不透明度的變化，是非常快的，但沒有像在調用它的延遲。 console.time（）報告的時間爲2540MS或更長。我想這可能是因爲div＃模塊正在與其孩子一起動畫？但這種劑量是有道理的，因爲我有另一個功能「disableModule」，它在相反的方向做同樣的事情，並以合理的速度運行。

這裏是禁止模塊功能，相當多的事情，但返回的約242ms

disableModule : function(moduleName){ 
     $('div#'+moduleName+', div.'+moduleName).each(function(){ 
     var module = $(this); 
     module.prepend('<div class="disabled_sheild"></div>'); 
     var sheild = module.find('.disabled_sheild'); 
     sheild.css({'position' : 'absolute', 'z-index' : '200'}); 
     sheild.width(module.width()); 
     sheild.height(module.height()); 
     jQuery.each(jQuery.browser, function(i) { 
      if($.browser.msie){ 
       //module.css("display","none"); 
       //if using ie give sheild a transparent background layout 
      }else{ 
       console.time('animate'); 
       module.animate({'opacity' : '0.5'}, function(){ console.timeEnd('animate');}); 
      } 
      }); 
     }); 
    }

來源

2009-11-26 kevzettler

一些艱苦後故障排除我跟蹤它到是在禁用方法的瀏覽器檢測迴路的問題：

jQuery.each(jQuery.browser, function(i) { 
     if($.browser.msie){ 
     //module.css("display","none"); 
     //if using ie give sheild a transparent background layout 
     }else{ 
     console.time('animate'); 
     module.animate({opacity : 0.5}, 200, function(){console.timeEnd('animate');}); 
     } 
    });

談到這一塊帶來了一切加快速度。在嘗試優化其他一切後，我差點拉出頭髮。

來源

2009-11-28 00:09:08 kevzettler

次你試過簡單地重新奧爾丁呢？

module.find('.disabled_sheild').remove(); 
module.removeClass('disabled'); 
module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');});

動畫異步發生和find和remove方法可以消耗資源（尤其是因爲find走DOM樹）原本可以用於爲動畫。

而且，因爲你是動態創建的disable方法「已禁用盾」，你可以將它保存關閉

module.data("disabledShield", module.prepend('<div class="disabled_sheild"></div>'));

，只是使用引用您的enable方法，以避免DOM走

module.data("disabledShield").remove(); 
module.removeClass('disabled'); 
module.animate({'opacity' : '1.0'}, 300, function(){console.timeEnd('animate');});

（見http://docs.jquery.com/Internals/jQuery.data的文檔上$.data）

來源

2009-11-26 03:00:01

爲什麼這個jQuery .animate調用這麼慢？

回答

相關問題