Tengo esta función probada a continuación que funciona bien para atenuar un elemento dentro o fuera.Fundido de animación | jQuery vs js puro | setInterval vs. setTimeout
¿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;
});
}
1. No tiene que escribirlo. 2. No tienes que escribirlo. 3. No tiene que ... bueno :) Considere que "escribirlo" también implica "dar cuenta de las peculiaridades del navegador". También se adapta muy bien al resto del modelo de efecto jQuery para encadenamiento, etc. –
Simplemente descargue la fuente del desarrollador jQuery y extraiga la función fadeIn. El fadeIn de jQuery hace algo similar a tu función pero funciona mejor bajo carga, tratando de cumplir con las restricciones de tiempo. Además, toda la biblioteca animada está bastante bien diseñada y todo funciona. – Halcyon
según lo que observé antes, jQuery usa temporizadores (setTimeout) para llamar recursivamente a la función. De esa forma, su UI no se bloqueará durante la transición. – Joseph