Bài học hôm nay chúng ta sẽ cùng tìm hiểu về Phương thức
delay(), được sử dụng để đặt độ trễ, thời gian chờ để thực hiện hiệu ứng tiếp theo. Cùng xem để hiểu rõ hơn về method delay() này nhé
Các bạn đang xem bài viết thuộc bài học về jQuery Effects - hiệu ứng jQuery
Ví dụ về delay() Method trong jQuery
<div> với các màu lần lượt là đen, xanh lá, xanh dương, đỏ, tím
Khi bấm button sẽ thực hiện hiệu ứng
fadeIn(), tuy nhiên bạn sẽ thấy sự khác biệt về thời gian, chẳng hạn như màu xanh lá hiện ra trước, sau đó mới đến màu đen, rồi màu xanh dương, đỏ và tím.Và bạn sẽ thấy mỗi màu khi xuất hiện sẽ có một độ trễ về thời gian khác nhau. Đó là do hiệu ứng đã được cài đặt thêm phương thức
delay() để thực hiện việc hẹn giờ. Cùng xem cách sử dụng và thực hiện hiệu ứng này như thế nào nhé
jQuery delay() Method
Phương thứcdelay() dùng để chỉ định thời gian hẹn giờ cho hiệu ứng trong hàng đợiSyntax
Phương thức delay() trong jQuery có cú pháp
$(selector).delay(speed,queueName)
| Tham số / Parameter | Mô tả |
|---|---|
| selector | Bắt buộc. Đây là tham số để chỉ định phần tử được chọn. Tìm hiểu thêm tại bộ chọn jQuery Selectors |
| speed | Không bắt buộc. Không bắt buộc. Dùng để chỉ định thời gian hẹn giờ. Giá trị có thể được sử dụng:
|
| queueName | Không bắt buộc. Tham số này dùng để chỉ định tên của hàng đợi. Giá trị mặc định là "fx" |
Ví dụ về phương thức delay()
Ví dụ
Cùng xem ví dụ dưới đây để biết cách sử dụng phương thứcdelay() để tạo độ trễ cho hiệu ứng trong jQuery
$("#start").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
$("#div3").delay(800).fadeIn();
$("#div4").delay(2000).fadeIn();
$("#div5").delay(4000).fadeIn();
});
Ví dụ
Kết hợpdelay() method và animate() method để tạo độ hiệu ứng chuyển động có độ trễ trong jQuery
$("#btn1").click(function(){
$("div").animate({height: "150px"});
$("div").animate({width: "150px"});
$("div").delay(1200).animate({height: "300px"});
});
