Hiệu ứng động (Animation) trong jQuery - 08 - Giải pháp website, App & CRM

Hiệu ứng động (Animation) trong jQuery – 08

Phương thức animate() trong jQuery được dùng để tạo hiệu ứng động (di chuyển, thay đổi kích thước,….) cho phần HTML.

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

Phương thức animate() được dùng để tạo hiệu ứng động cho phần tử HTML

Cú pháp: $(selector).animate({params},speed,callback);

TRONG ĐÓ:

Tham số params là CÁC cặp thuộc tính : giá trị trong CSS (Ví dụ, height : 300px) để thay đổi hình dạng cho phần tử HTML
Tham số speed có thể CÓ hoặc KHÔNG. Tham số speed là tốc độ của hiệu ứng. Chỗ tham số speed có thể điền là “slow” (tốc độ chậm), “fast” (tốc độ nhanh), hoặc đơn vị milliseconds (ví dụ 1000 = 1 giây).
Tham số callback có thể CÓ hoặc KHÔNG. Tham số callback là một hàm xảy ra sau khi hiệu ứng animate() hoàn thành 100%.

Ví dụ:

Đoạn mã dưới đây dùng thuộc tính width có giá trị 500px với tham số speed bằng 2000 nhằm tạo hiệu ứng kéo dài phần tử ra với tốc độ 2 giây.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({width:'500px'},2000);
        })
    })
</script>
<style type="text/css">
    div{
        height:200px;
        width:50px;
        background-color:green;
    }
</style>
</head>
<body>
    <button>Click để xem hiệu ứng động</button>
    <hr>
    <div></div>
</body>
</html>

Phương thức animate() sử dụng nhiều cặp thuộc tính

Ở tham số params trong cú pháp trên, ta có thể điền vào đó nhiều cặp thuộc tính : giá trị, bằng cách dùng dấu phẩy ngăn cách giữa các cặp

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({
                width:'200px',
                height:'200px',
                top:'200px',
                left:'150px',
                opacity:'0.3'
            },3000);
        })
    })
</script>
<style type="text/css">
    div{
        height:50px;
        width:50px;
        background-color:green;
        position: relative;
    }
</style>
</head>
<body>
    <button>Click để xem hiệu ứng động</button>
    <hr>
    <div></div>
</body>
</html>

Trong trường hợp muốn di chuyển phần tử, bạn phải thiết lập thuộc tính position là relative, absolute hoặc fixed (Vì position:static phần tử không thể thay đổi vị trí)

Phương thức animate() sử dụng giá trị TƯƠNG ĐỐI và TUYỆT ĐỐI

Ví dụ 1:

Đoạn mã dưới đây là một ví dụ về sử dụng giá trị TUYỆT ĐỐI. Khi sử dụng giá trị TUYỆT ĐỐI, ta không quan tâm đến giá trị thuộc tính ban đầu là bao nhiu, ta chỉ biết giá trị thuộc tính cuối cùng là bằng giá trị TUYỆT ĐỐI

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({width:'400px',height:'400px'},2000);
        })
    })
</script>
<style type="text/css">
    div{
        height:100px;
        width:100px;
        background-color:green;
    }
</style>
</head>
<body>
    <button>Click vào đây</button>
    <hr>
    <div></div>
</body>
</html>

Ví dụ 2:

Đoạn mã dưới đây là một ví dụ về sử dụng giá trị TƯƠNG ĐỐI. Khi sử dụng giá trị TƯƠNG ĐỐI, giá trị thuộc tính cuối cùng của phần tử sẽ bằng giá trị ban đầu cộng thêm (+=) hoặc giảm bớt (-=) bởi giá trị TƯƠNG ĐỐI.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({width:'+=400px',height:'-=150px'},2000);
        })
    })
</script>
<style type="text/css">
    div{
        height:200px;
        width:100px;
        background-color:green;
    }
</style>
</head>
<body>
    <button>Click vào đây</button>
    <hr>
    <div></div>
</body>
</html>

Sử dụng liên tiếp các phương thức animate()

Nếu bạn sử dụng liên tiếp các phương thức animate() cho cùng một phần tử HTML. Thì các phương thức animate() đó sẽ tạo thành một hàng đợi, phương thức animate() bên dưới sẽ được thực thi khi phương thức animate() phía trên đã thực thi xong 100%.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({left:'300px'},1000);
            $("div").animate({top:'400px'},1000);
            $("div").animate({left:'0px'},1000);
            $("div").animate({top:'0px'},1000);
        })
    })
</script>
<style type="text/css">
    div{
        height:100px;
        width:100px;
        background-color:green;
        position:relative;
    }
</style>
</head>
<body>
    <button>Click vào đây</button>
    <hr>
    <div></div>
</body>
</html>

Phương thức animate() sử dụng giá trị được xác định trước

Bạn cũng có thể xác định giá trị chuyển động của các thuộc tính như “show”, “hide”, “toggle”.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({height:'toggle',width:'toggle'},2000);
        })
    })
</script>
<style type="text/css">
    div{
        height:100px;
        width:100px;
        background-color:green;
    }
</style>
</head>
<body>
    <button>Click vào đây</button>
    <hr>
    <div></div>
</body>
</html>