Chào mừng bạn quay lại với chuỗi bài học jQuery trên codetuthub.com!

Ở các bài trước, bạn đã học cách sử dụng các hiệu ứng như fadeIn, slideUp, toggle... Hôm nay, chúng ta sẽ tìm hiểu một phương pháp linh hoạt và mạnh mẽ hơn: tùy chỉnh Animation bằng jQuery.

1. jQuery animate() là gì?

Hàm animate() trong jQuery cho phép bạn thay đổi các thuộc tính CSS có giá trị số (như width, height, opacity, margin, padding, v.v.) với hiệu ứng mượt.

Cú pháp:

js
$(selector).animate({ properties }, duration, easing, callback);
  • properties: các thuộc tính CSS bạn muốn thay đổi
  • duration: thời gian thực hiện (vd: "slow", "fast", 1000)
  • easing: (tùy chọn) kiểu chuyển động (mặc định là "swing" hoặc "linear")
  • callback: hàm thực thi sau khi hoàn tất hiệu ứng

2. Ví dụ: Di chuyển và thay đổi kích thước bằng animate()

Dưới đây là ví dụ đầy đủ với HTML và jQuery script viết trong cùng một file HTML.

html
Thử online
<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: tomato;
        position: relative;
    }
</style>
<h2>Ví dụ jQuery animate()</h2>
<button id="btnAnimate">Chạy Animation</button>

<div id="box"></div>

<script>
    $('#btnAnimate').click(function() {
        $('#box').animate({
            left: '250px',
            width: '150px',
            height: '150px',
            opacity: 0.5,
        }, 1000, function() {
            alert('Hoàn tất animation!');
        });
    });
</script>

3. Thêm ví dụ: Chuỗi animation liên tiếp

Bạn có thể thực hiện nhiều hiệu ứng nối tiếp nhau như sau:

html
Thử online
<style>
    #panel {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
        margin-top: 20px;
        position: relative;
    }
</style>
<h2>Chuỗi hiệu ứng với animate()</h2>
<button id="btnSequence">Thực hiện chuỗi animation</button>

<div id="panel"></div>

<script>
    $('#btnSequence').click(function() {
        $('#panel').
            animate({left: '200px'}, 600).
            animate({top: '100px'}, 600).
            animate({width: '200px', height: '50px'}, 600).
            animate({opacity: 0.2}, 600);
    });
</script>

4. Một số thuộc tính CSS dùng được với animate()

  • width, height
  • opacity
  • margin, padding
  • left, top, right, bottom (phải có position: relative|absolute)
  • fontSize, borderWidth, v.v.

Tổng kết

  • animate() cho phép bạn tạo hiệu ứng động mạnh mẽ và linh hoạt.
  • Có thể áp dụng nhiều hiệu ứng liên tiếp hoặc kết hợp với callback.
  • Chỉ hoạt động với thuộc tính CSS có giá trị số.

Trong bài tiếp theo, chúng ta sẽ tìm hiểu cách dừng, tiếp tục và điều khiển các animation bằng stop(), delay(), v.v.

Hẹn gặp lại bạn tại bài tiếp theo trên codetuthub.com – Học code từ thực chiến, dễ hiểu, dễ nhớ!