jQuery Animations - Phương thức animate()

Phương thức animate() được sử dụng để làm vật thể di chuyển.

Cú pháp:

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

Tham số params xác định các thuộc tính CSS để làm động.

Tham số speed chỉ định thời lượng của hiệu ứng. Nó có thể là các giá trị sau: "slow", "fast", hoặc milliseconds.

Tham số callback là chức năng sẽ được thực thi sau khi hoàn thành quá trình animate.

Ví dụ sau đây cho thấy việc sử dụng đơn giản phương thức animate(); Nó dịch chuyển phần tử <div> sang bên phải, cho đến khi bên trái nó cách 250px:

Ví dụ

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

Theo mặc định, tất cả các phần tử HTML có vị trí nhất định, và không thể di chuyển.
Để thay đổi vị trí, trước tiên hãy nhớ đặt thuộc tính position CSS của phần tử thành relative, fixed, hoặc absolute!

jQuery animate() - animate đa thuộc tính

Lưu ý rằng nhiều thuộc tính có thể được làm chuyển động cùng một lúc:

Ví dụ

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

Có thể thao tác TẤT CẢ các thuộc tính CSS bằng phương thức animate() không?

Câu trả lời là gần như có! Tuy nhiên, có một điều quan trọng cần nhớ: tất cả tên thuộc tính phải được viết theo kiểu camel-case khi sử dụng với phương thức animate(): Bạn sẽ viết paddingLeft thay vì padding-left, marginRight thay vì margin-right, vv...

Ngoài ra, animation cho màu không được include trong thư viện jQuery.
Vì thể nếu bạn muốn animate màu, bạn cần download Color Animations plugin trên trang web jQuery.com.

jQuery animate() - Sử dụng Relative Values 

Tử ví dụ sau bạn có thể add width và heigh thêm 150px mỗi lần bấm nút bằng cách làm theo ví dụ sau (Trường hợp muốn giảm bạn có thể dùng dấu "-="):

Ví dụ

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

jQuery animate() - Sử dụng Pre-defined Values

Bạn có thể sử dụng các giá trị như "show", "hide", hoặc "toggle":

Ví dụ

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

jQuery animate() - Sử dụng Queue Functionality

Theo mặc định, jQuery đi kèm với chức năng kiểu hàng đợi để animate phần tử.

Điều này có nghĩa là nếu bạn gọi nhiều phương thức animate(), jQuery tạo ra một hàng đợi "nội bộ" với các lần gọi phương thức này. Nó sẽ chạy từng dòng lệnh một.

Ví dụ 1

$("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");
}); 

Ví dụ 2

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