5
Tôi có chức năng thử nghiệm dưới đây hoạt động tốt để làm mờ một phần tử vào hoặc ra.Hoạt hình mờ dần | jQuery vs js tinh khiết | setInterval vs. setTimeout
Tôi có thể đạt được gì khi sử dụng JQuery?
Cảm ơn
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();
};
Chạy một tìm kiếm trên fadeIn() trên các thư viện lõi jquery tôi nhận được một hit ở đây:
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);
};
});
Sử dụng 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. Bạn không cần phải viết nó. 2. Bạn không cần phải viết nó. 3. Bạn không cần phải ... tốt :) Hãy xem xét rằng "viết nó" cũng ngụ ý "kế toán cho trình duyệt quirks". Nó cũng độc đáo phù hợp với phần còn lại của mô hình hiệu ứng jQuery cho chuỗi,… –
Chỉ cần tải về mã nguồn phát triển jQuery và trích xuất hàm fadeIn. jQuery's fadeIn làm một cái gì đó tương tự như chức năng của bạn nhưng nó thực hiện tốt hơn dưới tải, cố gắng giữ cho thời gian hạn chế. Ngoài ra, toàn bộ thư viện animate được thiết kế khá tốt và các công cụ chỉ hoạt động. – Halcyon
từ những gì tôi quan sát trước đây, jQuery sử dụng bộ tính giờ (setTimeout) để gọi đệ quy hàm. theo cách đó, giao diện người dùng của bạn sẽ không bị khóa trong khi chuyển đổi. – Joseph