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...
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Hiệu ứng jQuery jQuery cung cấp giao diện đơn giản để thực loại hiệu ứng tuyệt vời đa dạng Các phương thức jQuery cho phép áp dụng nhanh chóng hiệu ứng phổ biến với cấu hình tối thiểu Chương bàn luận tất phương thức jQuery quan trọng để tạo Visual Effect Hiển thị ẩn phần tử jQuery Các lệnh để hiển thị ẩn phần tử gọn mong muốn:show() để hiển thị phần tử tập hợp wrap hide() để ẩn chúng Cú pháp Sau cú pháp đơn giản cho phương thức show() jQuery: [selector].show( speed, [callback] ); Miêu tả chi tiết tham số: • speed − Một chuỗi biểu diễn tốc độ định trước ("slow", "normal", "fast") số mili giây để chạy hiệu ứng (ví dụ: 1000) • callback − tham số tùy ý biểu diễn hàm để thực thi hiệu ứng hoàn thành; thực thi lần cho hiệu ứng Còn cú pháp đơn giản cho phương thức hide() jQuery: [selector].hide( speed, [callback] ); Miêu tả chi tiết tham số: • speed − Một chuỗi biểu diễn tốc độ định trước ("slow", "normal", "fast") số mili giây để chạy hiệu ứng (ví dụ: 1000) • callback − tham số tùy ý biểu diễn hàm để thực thi hiệu ứng hoàn thành; thực thi lần cho hiệu ứng Ví dụ Bạn xem xét HTML file sau với jQuery code nhỏ: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/jquery/index.jsp Copyright © vietjack.com The jQuery Example $(document).ready(function() { $("#show").click(function () { $(".mydiv").show( 1000 ); }); $("#hide").click(function () { $(".mydiv").hide( 1000 ); }); }); mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:100px;} This is a SQUARE Nó cho kết sau: This is a SQUARE Toggle pToggle phần tử jQuery jQuery cung cấp phương thức để toggle trạng thái hiển thị phần tử hiển thị ẩn Nếu phần tử khởi tạo hiển thị, ẩn; ẩn, hiển thị Cú pháp Cú pháp đơn giản cho phương thức toggle() jQuery: [selector] toggle([speed][, callback]); Dưới miêu tả tham số: • speed − Một chuỗi biểu diễn tốc độ định trước ("slow", "normal", "fast") số mili giây để chạy hiệu ứng (ví dụ: 1000) • callback − tham số tùy ý biểu diễn hàm để thực thi hiệu ứng hoàn thành; thực thi lần cho hiệu ứng Ví dụ Chúng ta tạo hiệu ứng cho phần tử nào, ví dụ phần tử div chứa hình ảnh: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/jquery/index.jsp Copyright © vietjack.com The jQuery Example $(document).ready(function() { $(".clickme").click(function(event){ $(".target").toggle('slow', function(){ $(".log").text('Transition Complete'); }); }); }); clickme{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:50px;} Click Me Nó cho kết sau: Các phương thức jQuery Effect Ở phần trên, bạn theo dõi khái niệm jQuery Effect Bảng liệt kê tất phương thức để tạo kiểu hiệu ứng khác nhau: STT Phương thức & Miêu tả animate( params, [duration, easing, callback] ) Một hàm để tạo hiệu ứng custom fadeIn( speed, [callback] ) Fade in tất phần tử so khớp việc điều chỉnh opacity (độ chắn sáng) kích hoạt callback tùy ý sau hồn thành fadeOut( speed, [callback] ) Fade out tất phần tử so khớp điều chỉnh opacity 0, sau thiết lập hiển thị “none” kích hoạt callback tùy ý sau hồn thành fadeTo( speed, opacity, callback ) Fade độ chắn sáng tất phần tử so khớp tới opacity cho kích hoạt callback tùy ý sau hoàn thành hide( ) http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Ẩn phần tử tập hợp so khớp chúng hiển thị hide( speed, [callback] ) Ẩn tất phần tử so khớp sử dụng hiệu ứng đẹp kích hoạt callback tùy ý sau hoàn thành show( ) Hiển thị phần tử tập hợp so khớp chúng bị ẩn show( speed, [callback] ) Hiển thị tất phần tử so khớp sử dụng hiệu ứng đẹp kích hoạt callback tùy ý sau hoàn thành 10 slideDown( speed, [callback] ) Bộc lộ tất phần tử so khớp điều chỉnh chiều cao chúng kích hoạt callback tùy ý sau hồn thành 11 slideToggle( speed, [callback] ) Toggle nhìn thấy tất phần tử so khớp điều chỉnh chiều cao kích hoạt callback tùy ý sau hoàn thành 12 slideUp( speed, [callback] ) Ẩn tất phần tử so khớp điều chỉnh chiều cao chúng kích hoạt callback tùy ý sau hoàn thành 13 stop( [clearQueue, gotoEnd ]) Dừng tất hiệu ứng chạy tất phần tử xác định 14 toggle( ) Toggle hiển thị phần tử tập hợp phần tử so khớp 15 toggle( speed, [callback] ) Toggle hiển thị phần tử tập hợp phần tử so khớp sử dụng http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/jquery/index.jsp Copyright © vietjack.com hiệu ứng đẹp kích hoạt callback tùy ý sau hoàn thành 16 toggle( switch ) Toggle hiển thị phần tử tập hợp so khớp dựa việc chuyển mạch giữa: true hiển thị tất phần tử, false ẩn tất phần tử 17 jQuery.fx.off Vơ hiệu hóa tồn tất hiệu ứng Các hiệu ứng sở UI Library jQuery Để sử dụng hiệu ứng này, bạn tải jQuery UI Library jqueryui-1.11.4.custom.zip từ trang jQuery UI Library sử dụng Google CDN để sử dụng theo cách tương tự thực cho jQuery Chúng sử dụng Google CDN cho jQuery UI sử dụng đoạn trích code sau trang HTML: STT Phương thức & Miêu tả Blind Blind away phần tử hiển thị blind in Bounce Bounce phần tử theo chiều dọc chiều ngang n lần Clip Clip on clip off phần tử, theo chiều dọc chiều ngang Drop Drop away phần tử hiển thị drop in http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Explode Explode phần tử thành nhiều phần Fold Fold phần tử phần tờ giấy Highlight Highlight với màu cho Puff Scale fade out hiệu ứng tạo hiệu ứng puff Pulsate Pulsate độ chắn sáng phần tử nhiều lần 10 Scale Shrink grow phần tử tỷ lệ phần trăm 11 Shake Shake phần tử theo chiều dọc chiều ngang n lần 12 Size Đưa phần tử chiều cao rộng xác định 13 Slide Slide out phần tử khỏi cửa nhìn 14 Transfer Chuyển hình dáng phần tử cho phần tử khác hần tử jQuery jQuery cung cấp phương thức để toggle trạng thái hiển thị phần tử hiển thị ẩn Nếu phần tử khởi tạo hiển thị, ẩn; ẩn, hiển thị http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Cú pháp Cú pháp đơn giản cho phương thức toggle() jQuery: [selector] toggle([speed][, callback]); Dưới miêu tả tham số: • speed − Một chuỗi biểu diễn tốc độ định trước ("slow", "normal", "fast") số mili giây để chạy hiệu ứng (ví dụ: 1000) • callback − tham số tùy ý biểu diễn hàm để thực thi hiệu ứng hoàn thành; thực thi lần cho hiệu ứng Ví dụ Chúng ta tạo hiệu ứng cho phần tử nào, ví dụ phần tử div chứa hình ảnh: The jQuery Example $(document).ready(function() { $(".clickme").click(function(event){ $(".target").toggle('slow', function(){ $(".log").text('Transition Complete'); }); }); }); clickme{ margin:10px;padding:12px; border:2px solid #666; width:100px; height:50px;} Click Me Nó cho kết sau: Các phương thức jQuery Effect Ở phần trên, bạn theo dõi khái niệm jQuery Effect Bảng liệt kê tất phương thức để tạo kiểu hiệu ứng khác nhau: STT Phương thức & Miêu tả animate( params, [duration, easing, callback] ) http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Một hàm để tạo hiệu ứng custom fadeIn( speed, [callback] ) Fade in tất phần tử so khớp việc điều chỉnh opacity (độ chắn sáng) kích hoạt callback tùy ý sau hoàn thành fadeOut( speed, [callback] ) Fade out tất phần tử so khớp điều chỉnh opacity 0, sau thiết lập hiển thị “none” kích hoạt callback tùy ý sau hoàn thành fadeTo( speed, opacity, callback ) Fade độ chắn sáng tất phần tử so khớp tới opacity cho kích hoạt callback tùy ý sau hoàn thành hide( ) Ẩn phần tử tập hợp so khớp chúng hiển thị hide( speed, [callback] ) Ẩn tất phần tử so khớp sử dụng hiệu ứng đẹp kích hoạt callback tùy ý sau hoàn thành show( ) Hiển thị phần tử tập hợp so khớp chúng bị ẩn show( speed, [callback] ) Hiển thị tất phần tử so khớp sử dụng hiệu ứng đẹp kích hoạt callback tùy ý sau hoàn thành 10 slideDown( speed, [callback] ) Bộc lộ tất phần tử so khớp điều chỉnh chiều cao chúng kích hoạt callback tùy ý sau hoàn thành 11 slideToggle( speed, [callback] ) Toggle nhìn thấy tất phần tử so khớp điều chỉnh chiều cao kích http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/jquery/index.jsp Copyright © vietjack.com hoạt callback tùy ý sau hoàn thành 12 slideUp( speed, [callback] ) Ẩn tất phần tử so khớp điều chỉnh chiều cao chúng kích hoạt callback tùy ý sau hoàn thành 13 stop( [clearQueue, gotoEnd ]) Dừng tất hiệu ứng chạy tất phần tử xác định 14 toggle( ) Toggle hiển thị phần tử tập hợp phần tử so khớp 15 toggle( speed, [callback] ) Toggle hiển thị phần tử tập hợp phần tử so khớp sử dụng hiệu ứng đẹp kích hoạt callback tùy ý sau hoàn thành 16 toggle( switch ) Toggle hiển thị phần tử tập hợp so khớp dựa việc chuyển mạch giữa: true hiển thị tất phần tử, false ẩn tất phần tử 17 jQuery.fx.off Vô hiệu hóa tồn tất hiệu ứng Các hiệu ứng sở UI Library jQuery Để sử dụng hiệu ứng này, bạn tải jQuery UI Library jqueryui-1.11.4.custom.zip từ trang jQuery UI Library sử dụng Google CDN để sử dụng theo cách tương tự chúng tơi thực cho jQuery Chúng sử dụng Google CDN cho jQuery UI sử dụng đoạn trích code sau trang HTML: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/jquery/index.jsp Copyright © vietjack.com STT Phương thức & Miêu tả Blind Blind away phần tử hiển thị blind in Bounce Bounce phần tử theo chiều dọc chiều ngang n lần Clip Clip on clip off phần tử, theo chiều dọc chiều ngang Drop Drop away phần tử hiển thị drop in Explode Explode phần tử thành nhiều phần Fold Fold phần tử phần tờ giấy Highlight Highlight với màu cho Puff Scale fade out hiệu ứng tạo hiệu ứng puff Pulsate Pulsate độ chắn sáng phần tử nhiều lần 10 Scale Shrink grow phần tử tỷ lệ phần trăm 11 Shake http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Shake phần tử theo chiều dọc chiều ngang n lần 12 Size Đưa phần tử chiều cao rộng xác định 13 Slide Slide out phần tử khỏi cửa nhìn 14 Transfer Chuyển hình dáng phần tử cho phần tử khác http://vietjack.com/ Trang chia sẻ các bài học online miễn phí ... tất phần tử 17 jQuery. fx.off Vô hiệu hóa tồn tất hiệu ứng Các hiệu ứng sở UI Library jQuery Để sử dụng hiệu ứng này, bạn tải jQuery UI Library jqueryui-1.11.4.custom.zip từ trang jQuery UI Library... tất phần tử 17 jQuery. fx.off Vơ hiệu hóa tồn tất hiệu ứng Các hiệu ứng sở UI Library jQuery Để sử dụng hiệu ứng này, bạn tải jQuery UI Library jqueryui-1.11.4.custom.zip từ trang jQuery UI Library... phần tử jQuery jQuery cung cấp phương thức để toggle trạng thái hiển thị phần tử hiển thị ẩn Nếu phần tử khởi tạo hiển thị, ẩn; ẩn, hiển thị Cú pháp Cú pháp đơn giản cho phương thức toggle() jQuery: