jQuery: Loạt hiệu ứng

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

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>

» Tiếp: Dừng hiệu ứng - stop()
« Trước: Tham số callback
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!