¿Por qué esta llamada jQuery .animate es tan lenta?

Question

Hola a todos, tengo una función bastante sencilla

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

La animación en sí misma, el cambio de opacidad, es muy rápido, pero hay una demora en llamarlo. console.time () reporta tiempos de 2540MS y mayores. Estoy pensando que puede ser porque el módulo div # está siendo animado junto con sus hijos? pero este dosent tiene sentido porque tengo otra función " disableModule " que hace lo mismo a la inversa y se ejecuta a una velocidad razonable.

Aquí está la función de Deshabilitar Módulo, mucho más en marcha pero devuelve tiempos de aproximadamente 242 ms

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

Después de una ardua solución de problemas, busqué un problema con el ciclo de detección del navegador en el método de desactivación:

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

Al comentar este bloque, todo se puso al día. Casi me arranqué el pelo después de intentar optimizar todo lo demás.

Answer 2

¿Ha intentado simplemente reordenarlos?

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

La animación

ocurre de forma asincrónica y los métodos find y remove podrían estar consumiendo recursos (especialmente porque find recorre el árbol DOM) que de otra forma podrían ser acostumbrado a la animación.

También, ya que estás creando dinámicamente el " escudo desactivado " en el método disable , puede guardarlo

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

y simplemente use esa referencia en su método de enable para evitar el recorrido DOM

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

(Consulte http://docs.jquery.com/Internals/jQuery.data para doc en $ .data )