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

Ở bài trước, bạn đã học cách tạo hiệu ứng tùy chỉnh với animate(). Trong bài này, chúng ta sẽ tiếp tục khám phá 2 khái niệm quan trọng giúp kiểm soát hiệu ứng nâng cao hơn trong jQuery:

Kết chuỗi hiệu ứng (chaining)

Dừng hiệu ứng với .stop()

1. Dừng hiệu ứng bằng stop()

Khi nào dùng stop()?

Khi một phần tử có nhiều hiệu ứng xếp hàng chờ nhau (ví dụ: slideDown rồi slideUp, lặp lại nhiều lần), bạn có thể dùng .stop() để ngăn xếp hàng hoặc dừng hiệu ứng đang chạy.

Ví dụ: Dừng slide khi hover nhanh

html
Thử online
<style>
    #menu {
        width: 200px;
        background: lightsteelblue;
        padding: 10px;
        display: none;
    }

    #btnToggleMenu {
        padding: 10px;
        background: #3498db;
        color: #fff;
        cursor: pointer;
        display: inline-block;
    }
</style>

<div id="btnToggleMenu">Di chuột để hiện menu</div>
<div id="menu">Đây là menu thả xuống</div>

<script>
    $('#btnToggleMenu').hover(
        function() {
            $('#menu').stop(true, true).slideDown();
        },
        function() {
            $('#menu').stop(true, true).slideUp();
        },
    );
</script>

Giải thích:

  • .stop(true, true):
    • Tham số đầu: true – xóa hàng đợi hiệu ứng.
    • Tham số thứ hai: true – hoàn tất hiệu ứng hiện tại ngay lập tức.
  • Giúp tránh tình trạng hiệu ứng bị "giật" hoặc "chồng chéo" khi di chuột liên tục.

2. Chaining – Kết chuỗi hiệu ứng

Chaining là gì?

jQuery cho phép bạn kết nối nhiều phương thức liên tiếp trên cùng một phần tử bằng dấu chấm (.). Điều này giúp code gọn hơn và dễ đọc hơn.

Ví dụ: Kết chuỗi hiệu ứng và CSS

html
Thử online
<style>
    #box {
        width: 100px;
        height: 100px;
        background: salmon;
        margin-top: 20px;
        position: relative;
    }
</style>

<button id="btnChain">Chạy chuỗi hiệu ứng</button>
<div id="box"></div>

<script>
    $('#btnChain').click(function() {
        $('#box').
            css('background', 'orange').
            slideUp(500).
            slideDown(500).
            animate({left: '200px', opacity: 0.5}, 800).
            animate({left: '0px', opacity: 1}, 800).
            css('border-radius', '20px');
    });
</script>

Lưu ý:

  • Chỉ nên kết chuỗi với các phương thức jQuery trả về this (tức là chính phần tử jQuery đó).
  • .css(), .slideUp(), .animate()... đều hỗ trợ chaining.

Tổng kết

  • Dùng .stop() để kiểm soát và dừng hiệu ứng khi người dùng thao tác nhanh.
  • Kết chuỗi hiệu ứng với chaining giúp code ngắn gọn và dễ bảo trì.
  • Có thể kết hợp .stop() với .animate(), .slideUp()... để tạo trải nghiệm mượt mà hơn.

📘 Trong bài tiếp theo, bạn sẽ học cách xử lý AJAX với jQuery – giúp trang web giao tiếp với server mà không cần tải lại.

Tiếp tục theo dõi trên codetuthub.com – Học code từ thực chiến, dễ hiểu, dễ nhớ!