Animate Nhiều Thẻ tuần tự
Bạn có thể tận dụng jQuery tích hợp trong hoạt hình xếp hàng, nếu bạn chỉ cần chọn một thẻ như cơ thể để làm xếp hàng toàn cầu:
// Convenience object to ease global animation queueing
$.globalQueue = {
queue: function(anim) {
$('body')
.queue(function(dequeue) {
anim()
.queue(function(innerDequeue) {
dequeue();
innerDequeue();
});
});
return this;
}
};
// Animation that coordinates multiple tags
$(".button").click(function() {
$.globalQueue
.queue(function() {
return $("#header").animate({top: "-50"}, "slow");
}).queue(function() {
return $("#something").animate({height: "hide"}, "slow");
}).queue(function() {
return $("ul#menu").animate({top: "20", left: "0"}, "slow");
}).queue(function() {
return $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");
});
});
http://jsfiddle.net/b9chris/wjpL31o0/
Vì vậy, , đây là lý do tại sao tính năng này hoạt động và hoạt động như thế nào:
Cuộc gọi đến $.globalQueue.queue() chỉ đang xếp hàng một cuộc gọi đến hoạt ảnh của thẻ của bạn, nhưng nó xếp hàng đó vào thẻ body.
Khi jQuery truy cập hoạt ảnh thẻ trong hàng đợi, hoạt ảnh của thẻ bắt đầu, trên hàng đợi cho thẻ của bạn - nhưng cách hoạt ảnh của khung công tác jQuery hoạt động. trường hợp này) để tạm dừng, cho đến khi hoạt ảnh tùy chỉnh gọi hàm được truyền vào trong hàm dequeue(). Vì vậy, mặc dù hàng đợi cho thẻ và nội dung hoạt ảnh của bạn là riêng biệt, hàng đợi của thẻ body hiện đang đợi cho số gọi dequeue() của nó. http://api.jquery.com/queue/#queue-queueName-callback
Chúng tôi chỉ cần thực hiện mục đang đợi cuối cùng trên hàng đợi của thẻ một lời kêu gọi tiếp tục xếp hàng toàn cầu bằng cách gọi hàm dequeue() của nó - đó là những gì gắn hàng đợi nhau.
Để thuận tiện, phương thức globalQueue.queue trả về tham chiếu this để dễ dàng chuỗi.
setInterval
Vì lợi ích của sự hoàn chỉnh, thật dễ dàng với đất ở đây chỉ tìm kiếm một sự thay thế cho setInterval - đó là bạn không quá nhiều tìm cách để làm cho hình ảnh động riêng biệt phối hợp, như chỉ bắn chúng trên thời gian mà không có sự gia tăng đột biến phía trước trong hoạt hình của bạn gây ra bởi cách các trình duyệt mới hơn sẽ trì hoãn hàng đợi hoạt hình và bộ hẹn giờ để tiết kiệm CPU.
Bạn có thể thay thế một cuộc gọi đến setInterval như thế này:
setInterval(doAthing, 8000);
Với điều này:
/**
* Alternative to window.setInterval(), that plays nicely with modern animation and CPU suspends
*/
$.setInterval = function (fn, interval) {
var body = $('body');
var queueInterval = function() {
body
.delay(interval)
.queue(function(dequeue) {
fn();
queueInterval();
dequeue(); // Required for the jQuery animation queue to work (tells it to continue animating)
});
};
queueInterval();
};
$.setInterval(doAthing, 8000);
http://jsfiddle.net/b9chris/h156wgg6/
Và tránh những vụ nổ vụng về của hình ảnh động khi một tab nền có hình ảnh động của nó được kích hoạt lại bởi trình duyệt.
6.9kb được nhận xét, chưa được rút gọn và không được nén. Prob <1kb trong thực tế – redsquare
Tôi đang tìm cách làm một điều rất giống với câu hỏi này, vì vậy tôi đã tạo một plugin Jquery nhỏ (https://github.com/fillswitch/Jquery-Sequential-Animations). Hy vọng nó sẽ giúp một số người khác ra! –