Fundido de animación | jQuery vs js puro | setInterval vs. setTimeout

Question

Tengo esta función probada a continuación que funciona bien para atenuar un elemento dentro o fuera.

¿Qué gano usando JQuery?

Gracias

Effects.prototype.fade = function(direction, max_time, element) 
{ 
    var elapsed = 0; 
    function next() { 
     elapsed += 10; 
     if (direction === 'up') 
     { 
      element.style.opacity = elapsed/max_time; 
     } 
     else if (direction === 'down') 
     { 
      element.style.opacity = (max_time - elapsed)/max_time; 
     } 
     if (elapsed <= max_time) { 
      setTimeout(next, 10); 
     } 
    } 
    next(); 
}; 

La ejecución de una búsqueda en fadeIn() en la biblioteca central jQuery consigo un hit aquí:

jQuery.each({ 
    slideDown: genFx("show", 1), 
    slideUp: genFx("hide", 1), 
    slideToggle: genFx("toggle", 1), 
    fadeIn: { opacity: "show" }, 
    fadeOut: { opacity: "hide" }, 
    fadeToggle: { opacity: "toggle" } 
}, function(name, props) { 
    jQuery.fn[ name ] = function(speed, easing, callback) { 
     return this.animate(props, speed, easing, callback); 
    }; 
}); 

Utilizando el JQuery Source Viewer

function (prop, speed, easing, callback) { 
    var optall = jQuery.speed(speed, easing, callback); 
    if (jQuery.isEmptyObject(prop)) { 
     return this.each(optall.complete, [false]); 
    } 
    prop = jQuery.extend({}, 
    prop); 
    return this[optall.queue === false ? "each" : "queue"](function() { 
     if (optall.queue === false) { 
      jQuery._mark(this); 
     } 
     var opt = jQuery.extend({}, 
     optall), 
      isElement = this.nodeType === 1, 
      hidden = isElement && jQuery(this).is(":hidden"), 
      name, val, p, display, e, parts, start, end, unit; 
     opt.animatedProperties = {}; 
     for (p in prop) { 
      name = jQuery.camelCase(p); 
      if (p !== name) { 
       prop[name] = prop[p]; 
       delete prop[p]; 
      } 
      val = prop[name]; 
      if (jQuery.isArray(val)) { 
       opt.animatedProperties[name] = val[1]; 
       val = prop[name] = val[0]; 
      } else { 
       opt.animatedProperties[name] = opt.specialEasing && opt.specialEasing[name] || opt.easing || "swing"; 
      } 
      if (val === "hide" && hidden || val === "show" && !hidden) { 
       return opt.complete.call(this); 
      } 
      if (isElement && (name === "height" || name === "width")) { 
       opt.overflow = [this.style.overflow, this.style.overflowX, this.style.overflowY]; 
       if (jQuery.css(this, "display") === "inline" && jQuery.css(this, "float") === "none") { 
        if (!jQuery.support.inlineBlockNeedsLayout) { 
         this.style.display = "inline-block"; 
        } else { 
         display = defaultDisplay(this.nodeName); 
         if (display === "inline") { 
          this.style.display = "inline-block"; 
         } else { 
          this.style.display = "inline"; 
          this.style.zoom = 1; 
         } 
        } 
       } 
      } 
     } 
     if (opt.overflow != null) { 
      this.style.overflow = "hidden"; 
     } 
     for (p in prop) { 
      e = new jQuery.fx(this, opt, p); 
      val = prop[p]; 
      if (rfxtypes.test(val)) { 
       e[val === "toggle" ? hidden ? "show" : "hide" : val](); 
      } else { 
       parts = rfxnum.exec(val); 
       start = e.cur(); 
       if (parts) { 
        end = parseFloat(parts[2]); 
        unit = parts[3] || (jQuery.cssNumber[p] ? "" : "px"); 
        if (unit !== "px") { 
         jQuery.style(this, p, (end || 1) + unit); 
         start = (end || 1)/e.cur() * start; 
         jQuery.style(this, p, start + unit); 
        } 
        if (parts[1]) { 
         end = (parts[1] === "-=" ? -1 : 1) * end + start; 
        } 
        e.custom(start, end, unit); 
       } else { 
        e.custom(start, val, ""); 
       } 
      } 
     } 
     return true; 
    }); 
} 

Answer 1

Por lo general, Don Incluya una biblioteca como jQuery solo por un solo efecto, pero como un purpo general biblioteca en sí con el fin de simplificar las cosas tales como DOM manipulation, AJAX llamadas, establecer CSS propiedades de una manera que es multi-navegador, además de aplicar effects (como .fadeIn/.fadeOut) y otherapplications.

Típicamente, se recomienda no agregar jQuery para una simple llamada. Pero mi razonamiento es que probablemente va a explotar más y más sus características a largo plazo, por lo que no veo una razón real para no usarlo.

En cuanto a la implementación de sus propias funciones fadeIn o fadeOut, puede consultar el jQuery source y extraer esos métodos, o realizar su propia implementación desde cero. Pero dado el hecho de que jQuery ya implementó este método, no veo por qué querría replicarlo, excepto para fines educativos.

Answer 2

La razón principal para usar JQuery sobre su código personalizado, en mi opinión, es que no tiene que mantener el código para múltiples navegadores y versiones múltiples. JQuery hace un buen trabajo al manejar las peculiaridades de los principales navegadores para ti.

Además, hay muchos otros usos excelentes para JQuery que es posible que desee utilizar más adelante.

En cuanto al código, cuando descarga JQuery: http://docs.jquery.com/Downloading_jQuery puede obtener la versión no comprimida, que está destinada a ser legible.

No conozco una manera simple de obtener solo esas funciones de JQuery. ¿Por qué no usar la biblioteca completa?