jQuery: Loạt hiệu ứng
Như đã trình bày với các bạn, tại cùng một phần tử bạn có thể áp dụng nhiều lần phương thức animate() để thiết lập các hiệu ứng liên tiếp.
Tuy nhiên, khi bạn dùng phương thức animate() thì nếu bạn muốn thiết lập bao nhiêu hiệu ứng cho phần tử bạn phải viết bấy nhiêu lệnh.
jQuery có một cách thức khác có thể tránh được điều này đó là sử dụng cách viết gọi là loạt hiệu ứng. Với cách viết này thì bạn chỉ cần thiết lập các hiệu ứng cho phần tử chỉ bằng một câu lệnh.
Cách dùng:
$(Bộ_chọn).hiệu_ứng1. hiệu_ứng2.hiệu_ứng3. …;
hoặc:
$(Bộ_chọn).hiệu_ứng1
.hiệu_ứng2
.hiệu_ứng3
. …;
Chẳng hạn:
$("#p1").css("color","red"). slideUp(2000).slideDown(2000);
hoặc:
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis. com/ajax/libs/jquery/1.11.0 /jquery.min.js">
</script>
<script>
$(function(){
$("button").click(function(){
$(this).css("color","red")
.slideUp(1000)
.slideDown(1000)
.animate({left:'30%'},1000)
.animate({left:'0%'},1000)
.animate({fontSize:"20px"}, 1000)
.animate({fontSize:"16px"}, 1000);
});
});
</script>
</head>
<body>
<button style="position:relative">Click 1 lần => 1 loạt hiệu ứng. Click n lần => n loạt hiệu ứng.</button>
</body>
</html>