JQuery: Hiệu ứng Animate | V1Study

Trang chủ » Các Hiệu ứng Jquery » JQuery: Hiệu ứng Animate | V1Study

Có thể bạn quan tâm

Học viện Đào tạo và Công nghệ V1Study
  • Đào tạo Độ tuổi từ 5 - 11 Độ tuổi từ 12 - 17 Từ 18 tuổi
  • Lập trình Python Lập trình C C++ Java C# - C Sharp Android Scratch Pascal Robot mBot
  • Web ReactJS HTML5 CSS3 JavaScript Node.js JSP ASP.NET Core jQuery PHP
  • FW-CMS Laravel AngularJS Flutter Magento Bootstrap VueJS CodeIgnitor WordPress Sass Drupal
  • Video Video Python Video Lập trình C Video C# Video Java Video HTML5-CSS3-JavaScript Video SQL Server Video PHP Video jQuery Video Android Video C++ Video Scratch
  • Video1 Video XML-JSON Video MySQL Video Excel Video Giải thuật và Lập trình Video Sức khỏe Video Drupal Video mBot Video Giáo dục - Khoa học
  • Other Unity Giải thuật và lập trình Giải thuật và lập trình - C CCNA Mạng máy tính Design Patterns English Facebook SEO Git Tin học đại cương Japanese App-Uti Download
  • Data SQL Server XML JSON MySQL
  • News
≡ Học viện Đào tạo và Công nghệ V1Study ≡ jQuery jQuery Tuts Giới thiệu Hide & Show Hiệu ứng Fading Hiệu ứng Slide Hiệu ứng Animate Tham số callback Loạt hiệu ứng Dừng hiệu ứng - stop() click() method dblclick() method mouseenter() method mouseleave() method mousedown() method mouseup() method hover() method focus() method blur() method text() method html() method val() method attr() method append() method prepend() method before() & after() method width(), height(), innerWidth(), innerHeight(), outerWidth(), outerHeight() AJAX sử dụng jQuery each() method Kiểm tra một phần tử tồn tại bằng JQuery Cách thay đổi kích thước cột với jQuery Cách code PHP trong jQuery jQuery không thực hiện được sau khi nội dung được load thông qua AJAX next() method not() method Giữ nguyên vị trí thanh cuộn với sessionStorage parent() children() Cách tự động định chiều cao của iframe jQuery Examples Tạo hiệu ứng Scroll Jump bằng jQuery Cách tạo các tab nội dung Cách sử dụng Slick.min.js Slideshow tự tạo dùng jQuery Taught Buổi 1 Buổi 2 jQuery: Hiệu ứng Animate Khóa học qua video: Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript Đăng ký Hội viên Tất cả các video dành cho hội viên

Hiệu ứng Animate hay hiệu ứng hoạt họa trong jQuery.

Với jQuery bạn có thể thiết lập hiệu ứng hoạt họa bằng cách sử dụng phương thức animate().

Cú pháp:

$(Bộ_chọn).animate({params}, Tốc_độ, callback);

Tham số params phải được đặt trong cặp {}, tham số này chứa các thuộc tính CSS để tạo hoạt ảnh.

Lưu ý: Để có thể thiết lập hiệu ứng hoạt họa cho phần tử bạn phải thiết lập thuộc tính position của phần tử đó là một trong ba giá trị relative, fixed hoặc absolute.

Ví dụ dưới đây sẽ thiết lập hoạt họa cho vị trí của phần tử <div> cách bên trái 250px.

Ví dụ:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(function(){ $("button").click(function(){ $("#ani1").animate({left:'250px'}); }); }); </script> </head> <body> <button>Click => Hoạt họa</button> <br><br> <div id="ani1" style="background:#98bf21; height:200px; width:200px; position:relative;">jQuery</div> </body> </html>

Demo:

Có một điểm rất hay mà bạn nên biết, đó là bạn có thể thiết lập cùng lúc nhiều thuộc tính CSS cho hoạt họa (animate), các thuộc tính được phân cách nhau bằng dấu phẩy (,), có điều bạn lưu ý là nếu như thuộc tính nào có dạng “abc-def” thì khi áp dụng bạn cần viết lại dưới dạng “abcDef”, ví dụ như thuộc tính “font-size” bạn sẽ viết lại là “fontSize”.

Ví dụ:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ $("#ani1").animate({ left:'250px', opacity:'0.5', height:'300px', width:'300px', fontSize:'50px' },'slow'); }); }); </script> </head> <body> <button>Click => Hoạt họa</button> <br><br> <div id="ani1" style="background:#98bf21; height:200px; text-align:center; width:200px; position:relative;">jQuery</div> </body> </html>

Demo:

Thêm hoặc bớt liên tiếp giá trị trong hàm animate()

Giá trị tương quan được thiết lập bằng cách đặt += (thêm) hoặc -= (bớt) trước giá trị bạn muốn thay đổi. Chằng hạn như bạn muốn thêm chiều cao cho phần tử một lượng là 50px thì bạn viết là height:’+=50px’, bạn muốn bớt đi chiều rộng cho phần tử 50px bạn viết là width:’-=50px’.

Ví dụ:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ $("#ani1").animate({ left:'250px', height:'+=50px', width:'+=50px' }); }); }); </script> </head> <body> <button>Click đây nhiều lần => Tăng kích thước liên tiếp</button> <br><br> <div id="ani1" style="background:#98bf21;height:200px;width:200px;position:relative;">jQuery</div> </body> </html>

Demo:

Sử dụng các giá trị sẵn có trong phương thức animate()

Bạn được quyền sử dụng những giá trị có sẵn để áp dụng cho thuộc tính CSS như show, hide, toggle, …

Ví dụ:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ $("#ani1").animate({ height:'toggle' }); }); }); </script> </head> <body> <button>Click đây nhiều lần => Hoạt họa</button> <br><br> <div id="ani1" style="background:#98bf21; height:200px; width:200px; position:relative;">jquery</div> </body> </html>

Demo:

Tính năng hàng đợi trong phương thức animate()

jQuery cho phép bạn áp dụng nhiều lần phương thức animate() cho một phần tử, khi đó mỗi phương thức animate() áp dụng sẽ phải được đặt thành một lệnh riêng, phương thức animate() nào đứng trước thì được thực hiện trước, và phương thức animate() này phải được thực hiện xong mới chuyển sang phương thức animate() khác, điều này sẽ tạo nên tính năng hàng đợi.

Ví dụ 1:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ var div=$("#ani1"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); }); </script> </head> <body> <button>Click 1 lần => Hoạt họa 1 lần. Click n lần => Lặp hoạt họa n lần</button> <br><br> <div id="ani1" style="background:#98bf21; height:200px; width:200px; position:relative;">QUEUE</div> </body> </html>

Demo:

Trong ví dụ dưới đây, phần từ <div> đầu tiên sẽ được di chuyển sang phải, sau đó sẽ tăng kích thước font chữ cho văn bản bên trong:

Ví dụ 2:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ $("button").click(function(){ var div=$("#ani1"); div.animate({left:'150px'},"slow"); div.animate({fontSize:'3em'},"slow"); }); }); </script> </head> <body> <button>Click => Hoạt họa</button> <br><br> <div id="ani1" style="text-align:center; background:#98bf21; height:200px; width:200px; position:relative;">jQuery</div> </body> </html>

Demo:

» Tiếp: Tham số callback « Trước: Hiệu ứng Slide Khóa học qua video: Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript Đăng ký Hội viên Tất cả các video dành cho hội viên Khóa học qua video: Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript Đăng ký Hội viên Tất cả các video dành cho hội viên Copied !!! Copy linkCopied link!
Bạn muốn tìm kiếm điều gì?

Từ khóa » Các Hiệu ứng Jquery