Tự học JQuery - Hiệu Ứng - Bài 4 - Hiệu ứng động

Xem Mục lục lập trình JQuery

Hiệu ứng động với phương thức - animate()

Phương thức animate() được sử dụng để tạo những hiệu ứng 01 cách tùy biến.

Cú pháp:

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

Tham số params xác định thuộc tính CSS sẽ được tác động.

Tham số speed xác định thời lượng của hiệu ứng. Gồm các giá trị sau: "slow", "fast", hoặc milliseconds.

Tham số callback là 01 hàm được thực thi sau khi hiệu ứng kết thúc.

Ví dụ sau sẽ mô tả 01 cách sử dụng đơn giản của phương thức animate(); nó dịch chuyển 01 thẻ <div> sang bên phải, cho đến khi thuộc tính left=250 px

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

Mặc định, tất cả phần tử HTML đều có 01 vị trí cố định, và có thể dịch chuyển được.
Để xử lý vị trí của phần tử, bạn phải nhớ thiết lập thuộc tính position trong CSS thành: relative, fixed, hoặc absolute!

---

Phương thức animate() - Xử lý nhiều thuộc tính

Bạn chú ý rằng nhiều thuộc tính có thể "động" cùng 01 lúc.

Ví dụ:

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

Thật sự có thể điều khiển tất cả thuộc tính CSS với phương thức animate() ?

Vâng, hầu như vậy! Tuy nhiên, có 01 điều bạn cần phải nhớ: tất cả tên thuộc tính phải theo dạng có-gạch-nối khi sử dụng trong phương thức animate(): Bạn cần phải viết paddingLeft thay vì padding-left, marginRight thay vì margin-right, v.v.

Cũng vậy, hiệu ứng màu động chưa có trong phần lõi thư viện jQuery.
Nếu bạn muốn tạo hiệu ứng màu sắc , bạn cần tải xuống plugin ColorAnimations plugin từ jQuery.com.

Phương thức animate() - Tăng giảm giá trị

Ta cũng có thể tăng giảm giá trị bằng các phép tính += hoặc -= trước các giá trị.

Ví dụ:

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

Phương thức animate() - Sử dụng các giá trị có sẵn

Bạn có thể làm "động" các giá trị như "show", "hide", hoặc "toggle"

Ví dụ:

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

Phương thức animate() - Uses Queue Functionality

Mặc định, jQuery thực thi các hàm hiệu ứng động theo thứ tự từ trên xuống.

Điều đó nghĩa là nếu bạn viết nhiều phương thức animate() và gọi chúng tuần tự, jQuery tạo 01 "internal" hàng đợi các phương thức được gọi.

Sau đó nó chạy tuần tự từng cái 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: đầu tiên dịch chuyển thẻ <div> sang bên phải, và sau đó tăng kích cỡ của chữ.

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

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Xem Mục lục lập trình JQuery

By #drM