hieu ung trong jquery

hieu ung trong jquery tài liệu, giáo án, bài giảng , luận văn, luận án, đồ án, bài tập lớn về tất cả các lĩnh vực kinh t...

Trang 1

Hiệu ứng trong jQuery

jQuery cung cấp một giao diện đơn giản để thực hiện các loại hiệu ứng tuyệt vời đa dạng Các phương thức jQuery cho phép chúng ta áp dụng nhanh chóng các hiệu ứng phổ biến với cấu hình tối thiểu

Chương này sẽ bàn luận tất cả phương thức jQuery quan trọng để tạo các Visual Effect Hiển thị và ẩn các phần tử trong jQuery

Các lệnh để hiển thị và ẩn các phần tử là khá gọn như những gì chúng ta mong

muốn:show() để hiển thị các phần tử trong một tập hợp được wrap và hide() để ẩn chúng

Cú pháp

Sau đây là cú pháp đơn giản cho phương thức show() trong jQuery:

[selector].show( speed, [callback] );

Miêu tả chi tiết về các tham số:

• speed − Một chuỗi biểu diễn một trong 3 tốc độ đã định trước ("slow", "normal",

hoặc "fast") hoặc số mili giây để chạy hiệu ứng (ví dụ: 1000)

• callback − tham số tùy ý này biểu diễn một hàm để được thực thi bất cứ khi nào

hiệu ứng hoàn thành; thực thi một lần cho mỗi hiệu ứng

Còn đây là cú pháp đơn giản cho phương thức hide() trong jQuery:

[selector].hide( speed, [callback] );

Miêu tả chi tiết về các tham số:

Ví dụ

Bạn xem xét HTML file sau với một jQuery code nhỏ:

Trang 2

<html> <head> <title> The jQuery Example </title> <script

type= "text/javascript"

src= "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>

$ document).ready( function () $( "#show" ).click( function ()

$ ".mydiv" ).show( 1000 ); });

$ "#hide" ).click( function () $( ".mydiv" ).hide( 1000 );

}); }); </script> <style> .mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:100px;}

</style> </head> <body> <div class= "mydiv" >

This is a SQUARE </div> <input id= "hide" type= "button" value= "Hide" /> <input id= "show" type= "button" value= "Show" />

</body> </html>

Nó sẽ cho kết quả sau:

This is a SQUARE

Toggle các pToggle các phần tử trong jQuery

jQuery cung cấp các phương thức để toggle trạng thái hiển thị của các phần tử giữa hiển

thị và ẩn Nếu phần tử khi khởi tạo là hiển thị, nó sẽ được ẩn; nếu là ẩn, nó sẽ được hiển

thị

Cú pháp

Cú pháp đơn giản cho một phương thức toggle() trong jQuery:

[selector] toggle([speed][, callback]);

Dưới đây là miêu tả về các tham số:

Ví dụ

Chúng ta có thể tạo hiệu ứng cho bất kỳ phần tử nào, ví dụ như một phần tử div chứa một

hình ảnh:

Trang 3

$ document).ready( function () $( ".clickme" ).click( function (event){

$ ".target" ).toggle( 'slow' , function (){

$ ".log" ).text( 'Transition Complete' ); }); });

}); </script> <style> .clickme{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:50px;}

</style> </head> <body> <div class= "content" > <div class= "clickme" > Click Me </div> <div class= "target" > <img src= "./images/jquery.jpg" alt= "jQuery" />

</div> <div class= "log" ></div> </div>

</body> </html>

Các phương thức jQuery Effect

Ở phần trên, bạn đã theo dõi các khái niệm cơ bản về jQuery Effect Bảng dưới liệt kê tất

cả phương thức cơ bản để tạo các kiểu hiệu ứng khác nhau:

STT Phương thức & Miêu tả

1 animate( params, [duration, easing, callback] )

Một hàm để tạo các hiệu ứng custom

2 fadeIn( speed, [callback] )

Fade in tất cả các phần tử đã so khớp bởi việc điều chỉnh opacity (độ chắn sáng) và

kích hoạt một callback tùy ý sau khi hoàn thành

3 fadeOut( speed, [callback] )

Fade out tất cả phần tử đã so khớp bởi điều chỉnh opacity về 0, sau đó thiết lập hiển

thị về “none” và kích hoạt một callback tùy ý sau khi hoàn thành

4 fadeTo( speed, opacity, callback )

Fade độ chắn sáng của tất cả phần tử đã so khớp tới một opacity đã cho và kích hoạt

một callback tùy ý sau khi hoàn thành

5 hide( )

Trang 4

Ẩn mỗi phần tử trong tập hợp đã so khớp nếu chúng đã hiển thị

6 hide( speed, [callback] )

Ẩn tất cả phần tử đã so khớp bởi sử dụng một hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi hoàn thành

7 show( )

Hiển thị mỗi phần tử trong tập hợp đã so khớp nếu chúng bị ẩn

8 show( speed, [callback] )

Hiển thị tất cả phần tử đã so khớp bởi sử dụng một hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi hoàn thành

10 slideDown( speed, [callback] )

Bộc lộ tất cả phần tử đã so khớp bởi điều chỉnh chiều cao của chúng và kích hoạt một callback tùy ý sau khi hoàn thành

11 slideToggle( speed, [callback] )

Toggle sự nhìn thấy của tất cả phần tử đã so khớp bởi điều chỉnh chiều cao và kích hoạt một callback tùy ý sau khi hoàn thành

12 slideUp( speed, [callback] )

Ẩn tất cả phần tử đã so khớp bởi điều chỉnh chiều cao của chúng và kích hoạt một callback tùy ý sau khi hoàn thành

13 stop( [clearQueue, gotoEnd ])

Dừng tất cả các hiệu ứng đang chạy hiện tại trên tất cả phần tử đã xác định

14 toggle( )

Toggle sự hiển thị mỗi phần tử trong tập hợp các phần tử đã so khớp

15 toggle( speed, [callback] )

Toggle sự hiển thị mỗi phần tử trong tập hợp các phần tử đã so khớp bởi sử dụng một

Trang 5

hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi hoàn thành

16 toggle( switch )

Toggle sự hiển thị mỗi phần tử trong tập hợp đã so khớp dựa trên việc chuyển mạch giữa: true là hiển thị tất cả phần tử, false là ẩn tất cả phần tử

17 jQuery.fx.off

Vô hiệu hóa toàn bộ tất cả hiệu ứng

Các hiệu ứng trên cơ sở UI Library trong jQuery

Để sử dụng các hiệu ứng này, bạn có thể hoặc tải về jQuery UI Library mới nhất là jquery-ui-1.11.4.custom.zip từ trang jQuery UI Library hoặc sử dụng Google CDN để sử dụng

nó theo cách tương tự như chúng tôi đã thực hiện cho jQuery

Chúng tôi đã sử dụng Google CDN cho jQuery UI bởi sử dụng đoạn trích code sau trong trang HTML:

<head> <script

src=

"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" ></script> </head>

1 Blind

Blind away phần tử hoặc hiển thị nó bằng blind in

2 Bounce

Bounce phần tử theo chiều dọc hoặc chiều ngang n lần

3 Clip

Clip on hoặc clip off phần tử, theo chiều dọc hoặc chiều ngang

4 Drop

Drop away phần tử hoặc hiển thị nó bởi drop in

Trang 6

5 Explode

Explode phần tử thành nhiều phần

6 Fold

Fold phần tử như một phần của tờ giấy

7 Highlight

Highlight nền với màu đã cho

8 Puff

Scale và fade out các hiệu ứng tạo ra hiệu ứng puff

9 Pulsate

Pulsate độ chắn sáng của phần tử nhiều lần

10 Scale

Shrink hoặc grow một phần tử bởi tỷ lệ phần trăm nào đó

11 Shake

Shake phần tử theo chiều dọc hoặc chiều ngang n lần

12 Size

Đưa phần tử về chiều cao và rộng đã xác định

13 Slide

Slide out phần tử ra khỏi cửa nhìn

14 Transfer

Chuyển hình dáng của một phần tử cho phần tử khác

hần tử trong jQuery

jQuery cung cấp các phương thức để toggle trạng thái hiển thị của các phần tử giữa hiển thị và ẩn Nếu phần tử khi khởi tạo là hiển thị, nó sẽ được ẩn; nếu là ẩn, nó sẽ được hiển thị

Trang 7

Cú pháp

Cú pháp đơn giản cho một phương thức toggle() trong jQuery:

[selector] toggle([speed][, callback]);

Dưới đây là miêu tả về các tham số:

Ví dụ

Chúng ta có thể tạo hiệu ứng cho bất kỳ phần tử nào, ví dụ như một phần tử div chứa một

hình ảnh:

$ document).ready( function () $( ".clickme" ).click( function (event){

$ ".target" ).toggle( 'slow' , function (){

$ ".log" ).text( 'Transition Complete' ); }); });

}); </script> <style> .clickme{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:50px;}

</style> </head> <body> <div class= "content" > <div class= "clickme" > Click Me </div> <div class= "target" > <img src= "./images/jquery.jpg" alt= "jQuery" />

</div> <div class= "log" ></div> </div>

</body> </html>

Các phương thức jQuery Effect

Ở phần trên, bạn đã theo dõi các khái niệm cơ bản về jQuery Effect Bảng dưới liệt kê tất

cả phương thức cơ bản để tạo các kiểu hiệu ứng khác nhau:

1 animate( params, [duration, easing, callback] )

Trang 8

Một hàm để tạo các hiệu ứng custom

2 fadeIn( speed, [callback] )

Fade in tất cả các phần tử đã so khớp bởi việc điều chỉnh opacity (độ chắn sáng) và

kích hoạt một callback tùy ý sau khi hoàn thành

3 fadeOut( speed, [callback] )

Fade out tất cả phần tử đã so khớp bởi điều chỉnh opacity về 0, sau đó thiết lập hiển

thị về “none” và kích hoạt một callback tùy ý sau khi hoàn thành

4 fadeTo( speed, opacity, callback )

Fade độ chắn sáng của tất cả phần tử đã so khớp tới một opacity đã cho và kích hoạt

một callback tùy ý sau khi hoàn thành

5 hide( )

Ẩn mỗi phần tử trong tập hợp đã so khớp nếu chúng đã hiển thị

6 hide( speed, [callback] )

Ẩn tất cả phần tử đã so khớp bởi sử dụng một hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi hoàn thành

7 show( )

Hiển thị mỗi phần tử trong tập hợp đã so khớp nếu chúng bị ẩn

8 show( speed, [callback] )

Hiển thị tất cả phần tử đã so khớp bởi sử dụng một hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi hoàn thành

10 slideDown( speed, [callback] )

Bộc lộ tất cả phần tử đã so khớp bởi điều chỉnh chiều cao của chúng và kích hoạt một callback tùy ý sau khi hoàn thành

11 slideToggle( speed, [callback] )

Toggle sự nhìn thấy của tất cả phần tử đã so khớp bởi điều chỉnh chiều cao và kích

Trang 9

hoạt một callback tùy ý sau khi hoàn thành

12 slideUp( speed, [callback] )

Ẩn tất cả phần tử đã so khớp bởi điều chỉnh chiều cao của chúng và kích hoạt một callback tùy ý sau khi hoàn thành

13 stop( [clearQueue, gotoEnd ])

Dừng tất cả các hiệu ứng đang chạy hiện tại trên tất cả phần tử đã xác định

14 toggle( )

Toggle sự hiển thị mỗi phần tử trong tập hợp các phần tử đã so khớp

15 toggle( speed, [callback] )

Toggle sự hiển thị mỗi phần tử trong tập hợp các phần tử đã so khớp bởi sử dụng một hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi hoàn thành

16 toggle( switch )

Toggle sự hiển thị mỗi phần tử trong tập hợp đã so khớp dựa trên việc chuyển mạch giữa: true là hiển thị tất cả phần tử, false là ẩn tất cả phần tử

17 jQuery.fx.off

Vô hiệu hóa toàn bộ tất cả hiệu ứng

Các hiệu ứng trên cơ sở UI Library trong jQuery

Để sử dụng các hiệu ứng này, bạn có thể hoặc tải về jQuery UI Library mới nhất là jquery-ui-1.11.4.custom.zip từ trang jQuery UI Library hoặc sử dụng Google CDN để sử dụng

nó theo cách tương tự như chúng tôi đã thực hiện cho jQuery

Chúng tôi đã sử dụng Google CDN cho jQuery UI bởi sử dụng đoạn trích code sau trong trang HTML:

<head> <script

src=

"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" ></script> </head>

Trang 10

1 Blind

Blind away phần tử hoặc hiển thị nó bằng blind in

2 Bounce

Bounce phần tử theo chiều dọc hoặc chiều ngang n lần

3 Clip

Clip on hoặc clip off phần tử, theo chiều dọc hoặc chiều ngang

4 Drop

Drop away phần tử hoặc hiển thị nó bởi drop in

5 Explode

Explode phần tử thành nhiều phần

6 Fold

Fold phần tử như một phần của tờ giấy

7 Highlight

Highlight nền với màu đã cho

8 Puff

Scale và fade out các hiệu ứng tạo ra hiệu ứng puff

9 Pulsate

Pulsate độ chắn sáng của phần tử nhiều lần

10 Scale

Shrink hoặc grow một phần tử bởi tỷ lệ phần trăm nào đó

11 Shake

Trang 11

Shake phần tử theo chiều dọc hoặc chiều ngang n lần

12 Size

Đưa phần tử về chiều cao và rộng đã xác định

13 Slide

Slide out phần tử ra khỏi cửa nhìn

14 Transfer

Chuyển hình dáng của một phần tử cho phần tử khác

Định dạng
Số trang	11
Dung lượng	369,39 KB