jQuery animate() phương thức thực hiện hoạt ảnh 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 đối tượng 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ư thời lượng và chức năng gọi lại.
Có rất nhiều tùy chọn dành cho animate() . Phần giới thiệu này sẽ được giới hạn ở phần mở đầu. Chúng ta sẽ xem xét cú pháp của jQuery animate cũng như mã ví dụ. Mã ví dụ của chúng tôi sẽ hiển thị cách mở rộng
animate() . Tại sao nên sử dụng jQuery animate()?
Có nhiều trường hợp sử dụng jQuery animate() . Nói một cách đơn giản, bạn có thể sử dụng phương pháp này bất cứ khi nào ứng dụng của bạn cần hoạt ảnh ở giao diện người dùng. Phương pháp này cung cấp một giải pháp năng động và phức tạp.
Hoạt hình đã trở thành thông lệ tiêu chuẩn trong phát triển giao diện người dùng. Thực hành đủ bằng cách sử dụng animate() , bạn sẽ nhanh chóng triển khai hoạt ảnh cho giao diện người dùng của dự án. Hãy bắt đầu bằng cách học một số cú pháp.
Cú pháp jQuery animate()
Như chúng ta đã thảo luận ngắn gọn, animate() lấy một đối số của một đối tượng CSS. Đây là một đối tượng chứa các giá trị mới của thuộc tính CSS đã chọn. Cách tốt nhất là chỉ sử dụng animate() trên một phần tử được tham chiếu trong biểu định kiểu.
Giống như tất cả các phương thức jQuery, animate() phải được gắn vào một phần tử đã chọn. Từ đó gọi animate() và chuyển vào một đối tượng thuộc tính CSS với các giá trị của giao diện cuối cùng mong muốn. Điều quan trọng cần đề cập ở đây là animate() chỉ hoạt động với các thuộc tính số của CSS. Các thuộc tính như màu sắc hoặc kiểu phông chữ sẽ không được animate() đọc .
jQuery animate() đang hoạt động
Hãy chia nhỏ phần giải thích ở trên thành mã để làm cho nó rõ ràng hơn, bắt đầu bằng cách hiển thị HTML cơ bản của một nút và
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à những gì chúng ta sẽ sử dụng để chọn chúng với jQuery. Bây giờ hãy xem cách chúng ta có thể tạo kiểu cho
animate() . CSS
div {
background-color: lightblue;
width: 100px;
border: 1px solid blue;
} Ở đây, chúng ta đã tạo kiểu cho
animate() một đối tượng thuộc tính CSS. Những thuộc tính này sẽ phản ánh những thay đổi cuối cùng mà chúng ta muốn thấy. $('#click').click(function() {
$('#block').animate({
width: '70%',
fontSize: '3em',
borderWidth: '10px'
})
})
Nếu chúng ta chia nhỏ jQuery, chúng ta sẽ thấy rằng chúng ta đã chọn nút theo thuộc tính id của lần nhấp. Sau đó, chúng tôi gọi jQuery click() phương pháp đính kèm một trình xử lý sự kiện chờ nhận được một cú nhấp chuột. Một lần click() nhận được sự kiện click, nó sẽ thực thi chức năng gọi lại.
Để làm mới bộ nhớ của bạn, hàm gọi lại là một hàm được truyền cho một hàm khác sẽ được thực thi sau đó. Trong trường hợp này, đó là sau khi phát hiện sự kiện nhấp chuột. Đọc thêm về jQuery click() ở đây.
Chuyển sang bên trong hàm gọi lại, chúng ta chọn
animate() trên
Lưu ý fontSize và borderWidth khác với cách khai báo chúng như thế nào trong CSS. Đây là cách jQuery chấp nhận các thuộc tính CSS thường được gạch nối.
Các giá trị trong đối tượng CSS của chúng tôi là những gì chúng tôi muốn hiển thị sau khi hoạt ảnh hoàn tất. Bây giờ, khi nhấp vào nút, chúng ta sẽ thấy
Nó đã hoạt động! Chúng tôi thấy nội dung của
Kết luận
Trong bài viết cơ bản về jQuery dành cho người mới bắt đầu này animate() , chúng tôi đã biết được rằng animate() thực hiện hoạt ảnh trên đối tượng CSS. Đối tượng CSS đó được truyền cho phương thức có giá trị hiển thị cuối cùng. Cần nhắc lại rằng chỉ các giá trị CSS số mới được đọc bởi animate() . Các thuộc tính như màu nền và kiểu phông chữ sẽ không được đọc.
Còn rất nhiều điều cần giải quyết với jQuery animate() , vì vậy khi phần giới thiệu này có ý nghĩa, hãy nhấp vào đây. Bạn nên đọc qua tài liệu chính thức và thực hành với các ví dụ đi kèm. jQuery animate() Ban đầu có vẻ khá phức tạp, nhưng nếu luyện tập thường xuyên, bạn sẽ thành thạo hoạt hình sớm hơn bạn nghĩ!