Các ví dụ animate trong jQuery

Method .animate() cho phép chúng ta tạo ra hiệu ứng hình ảnh động trên bất kỳ properties CSS số nào. Các tham số chỉ yêu cầu là một map của properties CSS. Map này cũng tương tự như một trong đó có thể được gửi cho method .css(), ngoại trừ phạm vi properties hạn chế hơn.

.animate(properties, [duration], [easing], [complete])

properties: Một Map của properties CSS là các hình ảnh động sẽ chuyển hướng.

duration : chuỗi A hoặc số xác định bao lâu những hình ảnh động sẽ chạy.

easing : Một chuỗi chỉ có chức năng giảm bớt để sử dụng cho quá trình chuyển đổi.

complete : Một chức năng cho gọi một lần hoạt hình được hoàn thành.

.animate(properties,options)

properties: Một Map của properties CSS là các hình ảnh động sẽ chuyển hướng.

options : Một Map của các tùy chọn bổ sung để truyền cho các method. Hỗ trợ các khóa:

• duration : chuỗi A hoặc số xác định bao lâu những hình ảnh động sẽ chạy.
• easing: Một chuỗi chỉ có chức năng giảm bớt để sử dụng cho quá trình chuyển đổi.
• complete : Một chức năng cho gọi một lần hoạt hình được hoàn thành.
• step: Một chức năng để được gọi là sau mỗi bước của hình ảnh động.
• queue: Một Boolean cho biết có nên đặt các hình ảnh động trong queue hiệu ứng. Nếu false, các hình ảnh động sẽ bắt đầu ngay lập tức.
• specialEasing: Một Map của một hoặc một số các properties CSS được định nghĩa bởi các tham số properties và giảm bớt các chức năng tương ứng của nó(thêm 1.4).

Ví dụ: Click vào nút để animate của div với một số properties khác nhau.

        

        

Hello!

        

Demo minh họa từ http://api.jquery.com/animate/


Ví dụ: Animates div là property left có giá trị tương đối. Click nhiều lần trên các nút để xem ảnh động tương đối xếp hàng.

      

      

      

 Ví dụ: nút đầu tiên cho thấy các công trình hoạt hình là một unqueued. Nó mở rộng ra div đến 90%, trong khi chiều rộng font size gia tăng. Một khi thay đổi font-size được hoàn tất, các border hoạt hình sẽ bắt đầu. Nút thứ hai bắt đầu một chuỗi hoạt hình truyền thống, trong đó mỗi hình ảnh động sẽ bắt đầu một khi hoạt hình trước đây về element đã hoàn thành.

      

      

      

      

      

Block1

      

Block2

      

Block1

Block2

Ví dụ: Animates tất cả đoạn văn để toggle cả chiều cao và độ mờ đục, hoàn thành các hình ảnh động trong vòng 600 phần nghìn giây.

$("p").animate({"height": "toggle", "opacity": "toggle"}, "slow" );

Ví dụ: Animates tất cả các khoản để một phong cách trái của 50 và độ mờ đục của (opaque, nhìn thấy được) 1, hoàn thành các hình ảnh động trong vòng 500 phần nghìn giây.

$("p").animate({"left": "50", "opacity": 1}, 500 );

Ví dụ: Một ví dụ về cách sử dụng chức năng là một "easing" để cung cấp một phong cách khác nhau của hình ảnh động. Điều này sẽ chỉ làm việc nếu bạn có một plugin cung cấp các chức năng này easing. Lưu ý, mã này sẽ không làm gì cả trừ khi các phần tử đoạn văn bị ẩn.

$("p").animate({"opacity": "show"}, "slow", "easein" );

DangTRung.