动画淡入淡出|jQuery与纯js|setInterval与setTimeout
Animation fade | jQuery vs pure js | setInterval vs. setTimeout
我在下面测试了这个函数,它可以很好地将元素淡入或淡出。
使用JQuery可以获得什么?
感谢
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();
};
在核心jquery库的fadeIn()上运行搜索,我在这里得到了一个成功:
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 );
};
});
使用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;
});
}
通常情况下,除了应用效果(如.fadeIn
/.fadeOut
)和其他应用程序外,您不包括像jQuery这样的库,而是将其作为通用库,以简化DOM操作、AJAX调用、以跨浏览器的方式设置CSS属性。
建议您不要只为一个简单的调用添加jQuery。但我的理由是,从长远来看,你可能会利用它越来越多的功能,所以我看不出有什么真正的理由不使用它
关于实现自己的fadeIn或fadeOut函数,您可以查看jQuery源代码并提取这些方法,或者从头开始实现自己的方法。但考虑到jQuery已经实现了这个方法,我不明白你为什么要复制它,而不是为了教育目的。
在我看来,在自定义代码上使用JQuery的最大原因是,您不必为多个浏览器和多个版本维护代码。JQuery在处理主要浏览器的怪癖方面做得很好。
此外,JQuery还有许多其他优秀的用途,您可能希望稍后使用。
关于代码,当您下载JQuery时:http://docs.jquery.com/Downloading_jQuery你可以得到未压缩的版本,它是可读的。
我不知道有什么简单的方法可以只从JQuery中获得这些函数。为什么不使用完整的库?
相关文章:
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- Ember Data DS.Model's set函数不起作用
- node.js:setInterval()正在跳过调用
- setInterval和clearInterval javascript无法按需工作
- Don'我不明白为什么我的setInterval+jQuery;不起作用
- setInterval游戏循环的范围问题
- C#asp.net mvc Set CheckBoxFor已检查的具有Model Value的属性
- 为什么JavaScript可以'找不到给定的InnerHTML并返回Cannot set property
- JavaScript setInterval problems
- 如何在Javascript中延迟setInterval
- 无法在基于Cordova的应用程序中读取Set Cookie标头
- 如何执行相同的setInterval()
- SetInterval在javascript对象中表现怪异
- 从setInterval方法移动到带有sprite的requestAnimationFrame
- 如何在悬停时暂停setInterval
- 在不兼容的接收器上调用的方法Set.prototype.add未定义
- 可以't获取setInterval函数以使用javascript中的this.function_name调用另一
- 删除对象时终止setInterval
- 使用setInterval()函数进行图像闪烁
- set backgroundPosition and setInterval