Phương thức animate() của jQuery thực hiện animation tùy chỉnh trên các thuộc tính CSS được chỉ định. Nó chấp nhận một số đối số. Đối số đầu tiên là một object chứa các thay đổi CSS sẽ được thực hiện. Đối số thứ hai có thể xử lý nhiều tùy chọn như duration (thời gian) và callback function (hàm gọi lại).
Có một lượng lớn tùy chọn có sẵn cho animate(). Giới thiệu này sẽ giới hạn ở primer (bài hướng dẫn cơ bản) cho người mới. Chúng ta sẽ xem cú pháp cho jQuery animate cũng như code ví dụ. Code ví dụ sẽ chỉ cách mở rộng một <div> dùng animate().
Tại sao dùng jQuery animate()?
Có nhiều trường hợp sử dụng (use cases) cho jQuery animate(). Đơn giản nói, bạn có thể dùng phương thức này bất cứ khi nào ứng dụng của bạn cần animation ở front end. Phương thức này cung cấp giải pháp động và phức tạp.
Animation đã trở thành thực hành tiêu chuẩn trong phát triển front end. Với đủ thực hành dùng animate(), bạn sẽ triển khai animation cho front end dự án trong chớp mắt. Hãy bắt đầu bằng cách học cú pháp.
Cú pháp jQuery animate()
Như chúng ta đã thảo luận ngắn gọn, animate() nhận đối số là một object CSS. Đây là object chứa giá trị mới của các thuộc tính CSS được chọn. Một phương pháp hay là chỉ dùng animate() trên phần tử được tham chiếu trong stylesheet.
Giống như tất cả phương thức jQuery, animate() phải được gắn vào một phần tử được chọn. Từ đó, gọi animate() và truyền vào object thuộc tính CSS với giá trị của giao diện cuối cùng mong muốn. Quan trọng cần nhắc ở đây là animate() chỉ hoạt động với thuộc tính CSS dạng số (numerical). Thuộc tính như màu sắc (colors) hoặc kiểu font (font type) sẽ không được đọc bởi animate().
jQuery animate() trong hành động
Hãy phân tích giải thích trên thành code để làm rõ hơn, bắt đầu với rendering HTML cơ bản của một nút (button) và một <div>.
HTML <button id="click">Click Me</button> <div id="block">Watch Me!</div>
Cả hai phần tử đều có thuộc tính id. Đây là thứ chúng ta sẽ dùng để chọn chúng với jQuery. Bây giờ hãy xem cách chúng ta có thể style <div> để có thể dùng animate().
CSS div { background-color: lightblue; width: 100px; border: 1px solid blue; }
Ở đây, chúng ta đã style <div> với màu nền, chiều rộng, và viền nhỏ. Khi chúng ta dùng jQuery chọn <div>, chúng ta có thể truyền cho animate() một object thuộc tính CSS. Các thuộc tính này sẽ phản ánh các thay đổi cuối cùng chúng ta muốn thấy.
$('#click').click(function() { $('#block').animate({ width: '70%', fontSize: '3em', borderWidth: '10px' }) })
Nếu chúng ta phân tích jQuery, chúng ta thấy rằng chúng ta đã chọn nút bằng thuộc tính id của click. Sau đó chúng ta gọi phương thức jQuery click() để gắn event handler (trình xử lý sự kiện) chờ nhận click. Khi click() nhận sự kiện click, nó sẽ thực thi callback function.
Để làm mới bộ nhớ, callback function là một function được truyền cho function khác sẽ được thực thi sau. Trong trường hợp này, sau khi sự kiện click được phát hiện. Đọc thêm về jQuery click() ở đây.
Tiếp tục vào bên trong callback function, chúng ta chọn <div>. Giống như nút, chúng ta dùng thuộc tính id của block để chọn nó. Bây giờ chúng ta gọi animate() trên <div> và truyền cho nó object CSS của chúng ta.
Chú ý fontSize và borderWidth khác với cách khai báo CSS của chúng. Đây là cách jQuery chấp nhận thuộc tính CSS thường có dấu gạch ngang (hyphenated).
Các giá trị trong object CSS của chúng ta là những gì chúng ta muốn render khi animation hoàn tất. Bây giờ, khi chúng ta nhấp nút, chúng ta sẽ thấy <div> animate:
Nó hoạt động! Chúng ta thấy nội dung của <div> đều mở rộng cùng nhau cho đến khi đạt giá trị CSS mới.
Kết luận
Trong primer (bài hướng dẫn cơ bản) cho người mới về jQuery animate() này, chúng ta đã học rằng animate() thực hiện animation trên object CSS. Object CSS đó được truyền cho phương thức với giá trị hiển thị cuối cùng. Cần nhắc lại rằng chỉ giá trị CSS dạng số sẽ được đọc bởi animate(). Thuộc tính như background color và font type sẽ không được đọc.
Còn rất nhiều đất cần đào với jQuery animate(), vì vậy khi giới thiệu này có ý nghĩa, hãy nhấp vào đây. Luôn là thói quen tốt để đọc lại tài liệu chính thức và thực hành với các ví dụ đi kèm. jQuery animate() có thể có vẻ khá phức tạp lúc đầu, nhưng với thực hành thường xuyên, bạn sẽ làm chủ animation sớm hơn bạn nghĩ!