Почему этот jQuery .animate звонит так медленно?

Question

Привет всем У меня есть довольно прямо вперед функция

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

Answer 1

После некоторых трудных поиска и устранения неисправностей я отслеживал его вниз, чтобы быть проблемой с контуром обнаружения браузера в методе отключения:

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

Комментируя этот блок из привел все до скорости. Я почти вытащил волосы, пытаясь оптимизировать все остальное.

Answer 2

Вы пробовали просто повторно Ординг их?

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)