Hiệu ứng jQuery - Animation

Phương pháp jQuery animate() cho phép bạn tạo animation tùy chỉnh.

Hiệu ứng演示



jQuery

jQuery Animation - Phương pháp animate()

Phương pháp jQuery animate() được sử dụng để tạo animation tùy chỉnh.

Cú pháp:

$(selector).animate({params},speed,callback);

Bắt buộc params Tham số định nghĩa các thuộc tính CSS tạo animation.

Tùy chọn speed Tham số quy định thời gian của hiệu ứng. Nó có thể lấy các giá trị sau: "slow", "fast" hoặc miliseconds.

Tùy chọn callback Tham số là tên hàm sẽ được thực hiện sau khi animation hoàn thành.

Dưới đây là ví dụ đơn giản về cách sử dụng phương pháp animate(); nó di chuyển phần tử <div> sang bên trái cho đến khi thuộc tính left bằng 250 pixel:

Ví dụ

$("button").click(function(){
  $("div").animate({left:'250px'});
);

Thử trực tiếp

Lưu ý:Mặc định, tất cả các phần tử HTML đều có vị trí tĩnh và không thể di chuyển.

Nếu muốn thao tác vị trí, hãy nhớ trước tiên đặt thuộc tính CSS position của phần tử thành relative, fixed hoặc absolute!

jQuery animate() - Thao tác nhiều thuộc tính

Lưu ý rằng trong quá trình tạo animation, có thể sử dụng nhiều thuộc tính cùng một lúc:

Ví dụ

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  );
);

Thử trực tiếp

Lưu ý:Có thể sử dụng phương pháp animate() để thao tác tất cả các thuộc tính CSS không?

Đúng vậy, gần như có thể! Tuy nhiên, cần nhớ một điều quan trọng: khi sử dụng animate(), phải viết tên thuộc tính theo cách CamelCase cho tất cả các thuộc tính, ví dụ, phải sử dụng paddingLeft thay vì padding-left, sử dụng marginRight thay vì margin-right, v.v.

Đồng thời, hiệu ứng động màu sắc không được bao gồm trong thư viện jQuery lõi.

Nếu bạn cần tạo hiệu ứng động màu sắc, bạn cần tải xuống插件 Color Animations từ jQuery.com.

jQuery animate() - Sử dụng giá trị tương đối

Bạn cũng có thể định nghĩa các giá trị tương đối (giá trị này tương đối với giá trị hiện tại của phần tử). Bạn cần thêm '+' hoặc '-' trước giá trị:

Ví dụ

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  );
);

Thử trực tiếp

jQuery animate() - Sử dụng giá trị được định trước

Bạn thậm chí có thể đặt giá trị động của thuộc tính là "show", "hide" hoặc "toggle":

Ví dụ

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  );
);

Thử trực tiếp

jQuery animate() - Sử dụng chức năng hàng đợi

Mặc định, jQuery cung cấp chức năng hàng đợi cho các hiệu ứng động.

Điều này có nghĩa là nếu bạn viết nhiều gọi animate() sau khi nhau, jQuery sẽ tạo ra một "hàng đợi nội bộ" chứa các phương thức gọi này. Sau đó, chạy từng gọi animate một.

Ví dụ 1

Ẩn đi, nếu bạn muốn thực hiện các hiệu ứng động khác nhau sau khi chúng kết thúc, chúng ta cần sử dụng chức năng hàng đợi:

$("button").click(function(){
  var div=$("div");
  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");
);

Thử trực tiếp

Ví dụ 2

Ví dụ dưới đây di chuyển thẻ <div> sang bên phải và tăng kích thước văn bản:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
);

Thử trực tiếp