Stopping animations with the stop() method

Trong chương trước, chúng ta nhìn thấy cách chúng ta làm với animation dùng phương thức animate() và cách chúng ta có thể thực hiện nhiều animation nối tiếp, bằng cách gọi animation và vì vậy là hàng đợi animation trong jQuery. Tuy nhiên, đôi khi bạn cần dừng animation trước khi nó hoàn thành và jQuery cung cấp cho chúng ta phương thức stop(). Nó thực hiện toàn bộ hiệu ứng liên quan tới hàm jQuery, bao gồm cả sliding, fading và animation với phương thức animate(). Ví dụ:

<a href="javascript:void(0);" onclick="$('#divTestArea1').slideDown(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea1').stop();">Stop</a>

<div id="divTestArea1" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Để làm cho ví dụ phong phú hơn thì tôi có dùng lời gọi inline trong sự kiện onclick của hai đường dẫn. Khi bạn nhấn vào đường dẫn đầu tiên thì phương thức slideDown() được gọi cho div. Một cú nhấp chuột vào đường dẫn thứ hai sẽ dừng animation lại. Đó là hoạt động mặc định của phương thức stop() nhưng tham số tùy chọn cho phép chúng ta làm mọi thứ khác đi. Tham số đầu tiên xác định liệu hàng đợi animation có biến mất hay không. Giá trị mặc định là false, có nghĩa là chỉ animation đang hoạt động mới dừng lại, cho phép mọi animation sau đó được thực hiện.

<a href="javascript:void(0);" onclick="$('#divTestArea2').slideDown(5000).slideUp(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').stop();">Stop</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').stop(true);">Stop all</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').clearQueue().hide();">Reset</a>

<div id="divTestArea2" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Chúng ta đưa thời gian animation vào đường dẫn "Show box". Nó sẽ slide chậm box, và khi hoàn thành lại cuốn lại như cũ. Hàng đợi cho phép mọi bước được thực hiện tuần tự. Bây giờ, nhấn vào "Reset" để box được ẩn đi và sau đó nhấn vào "Show box" một lần nữa, và nhấp "Stop". Bạn sẽ thấy animation đầu tiên dừng lại, cho phép animation thứ hai diễn ra. Tuy nhiên, nếu bạn nhấn "Stop all" thì tham số true cho phép xóa toàn bộ hàng đợi và toàn bộ animation dừng lại.

Tham số thứ hai cho jQuery biết liệu bạn có cần chỉ dừng lại hay cho phép nó hoàn thành. Điều này tạo sự khác biệt ta xem trong ví dụ sau:

<a href="javascript:void(0);" onclick="$('#divTestArea3').slideDown(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').stop(true);">Stop</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').stop(true, true);">Stop but finish</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').clearQueue().hide();">Reset</a>

<div id="divTestArea3" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Hãy dùng cả hai "Stop" - trong khi stop đầu tiên dừng ngay lập tức thì stop thứ hai sẽ hoàn thành nốt và dừng.