Phương thức animate() trong jQuery

1) Phương thức animate() trong jQuery

- Phương thức animate() dùng để thay đổi giá trị thuộc tính của phần tử và trong quá trình giá trị được thay đổi sẽ có kèm theo "hiệu ứng chuyển động".

- Ví dụ 1: Phần tử bên dưới có kích thước 100x100, khi bạn bấm vào nút thì kích thước sẽ thay đổi thành 300x300. Tuy nhiên, không phải đùng một cái là từ 100x100 thành 300x300, mà nó sẽ có kèm theo hiệu ứng chuyển động to dần lên.

- Ví dụ 2: Phần tử bên dưới được thiết lập thuộc tính left với giá trị là 0px, khi thì giá trị của thuộc tính left sẽ thay đổi thành 500px. Tuy nhiên, không phải đùng một cái là phần tử nằm cách vị trí ban đầu 500px, mà nó sẽ có kèm theo hiệu ứng chuyển động dần dần sang bên phải.

- Lưu ý: Phương thức animate() là một trong những phương thức quan trọng nhất trong jQuery. Với việc sử dụng phương thức animate(), ta có thể xây dựng được những hiệu ứng chuyển động vô cùng đặc sắc cho phần tử

2) Cách sử dụng phương thức animate() trong jQuery

- Để sử dụng phương thức animate(), ta dùng cú pháp như sau:

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

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong phương thức animate():

Tham số	Yêu cầu	Mô tả ý nghĩa & cách sử dụng
style	Bắt buộc	- Chỉ định cặp thuộc tính và giá trị được thay đổi. (giá trị phải được đặt bên trong cặp dấu nháy đơn hoặc nháy kép) - Ví dụ: Nếu bạn muốn thay đổi giá trị thuộc tính width của phần tử thành 500px thì bạn phải viết là width:"500px" - Lưu ý: Tên thuộc tính sử dụng trong phương thức animate() tương đối khác so với tên thuộc tính trong CSS. Tên thuộc tính trong phương thức animate() phải được viết dưới dạng camel-cased (tức là ký tự đầu tiên của từ thứ hai trở đi phải viết hoa) - Lưu ý: Phương thức animate() không hỗ trợ những thuộc tính mà giá trị của nó xác định bởi tên gọi, điển hình như: background-color, color, font-family, .... - Dưới đây là cách viết và cũng là danh sách các thuộc tính được hỗ trợ trong phương thức animate(): backgroundPositionX backgroundPositionY borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent - Lưu ý: Nếu bạn muốn chỉ định nhiều cặp thuộc tính và giá trị được thay đổi thì bạn phải đặt một dấu phẩy ở giữa mỗi hai cặp. - Lưu ý: Nếu bạn muốn thay đổi giá trị thuộc tính width của phần tử thành 500px và giá trị thuộc tính height của phần tử thành 250px thì bạn phải viết là width:"500px",height:"250px" (Xem ví dụ)
time	Không bắt buộc	- Chỉ định khoảng thời gian diễn ra hiệu ứng chuyển động. - Tham số này có thể được xác định bởi một trong ba loại giá trị: số mili giây cụ thể "slow" "fast" - Lưu ý: Mặc định thì khoảng thời gian diễn ra hiệu ứng chuyển động là 400 mili giây.
speed	Không bắt buộc	- Chỉ định tốc độ chuyển động ở những thời điểm khác nhau. - Tham số này có thể được xác định bởi một trong hai loại giá trị: "swing" - chậm ở đoạn đầu & cuối, nhanh ở đoạn giữa. "linear" - tốc độ không đổi. - Lưu ý: Mặc định thì tốc độ chuyển động là không đổi ("swing")
callback	Không bắt buộc	- Một hàm callback sẽ được thực thi sau khi phương thức animate() đã được thực thi hoàn tất.

3) Một số ví dụ

Ví dụ 1:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").animate({width:"300px",height:"300px"});
        });
    });
</script>

Xem ví dụ

Ví dụ 2:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").animate({width:"300px",height:"300px"},3500);
        });
    });
</script>

Xem ví dụ

Ví dụ 3:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").animate({width:"300px",height:"300px"},3500,"linear");
        });
    });
</script>

Xem ví dụ

Ví dụ 4:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").animate({width:"300px",height:"300px"},3500,"linear",function(){
                alert("KẾT THÚC HIỆU ỨNG CHUYỂN ĐỘNG");
            });
        });
    });
</script>

Xem ví dụ

4) Sử dụng giá trị tương đối

Ví dụ:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").animate({width:"+=200px",height:"-=200px"});
        });
    });
</script>

Xem ví dụ

5) Sử dụng nhiều hiệu ứng chuyển động đồng thời

- Nếu một phần tử được thiết lập nhiều hiệu ứng chuyển động đồng thời thì các hiệu ứng đó sẽ được xếp thành một hàng đợi ---> hiệu ứng chuyển động được đặt trước sẽ thực thi trước ---> sau khi hiệu ứng đó thực thi xong thì sẽ đến hiệu ứng kế tiếp.

Ví dụ:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(".child").animate({left:"400px"},2000);
            $(".child").animate({top:"200px"},2000);
            $(".child").animate({left:"0px"},2000);
            $(".child").animate({top:"0px"},2000);
        });
    });
</script>

Xem ví dụ