Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

Phương thức stop() dùng để kết thúc một hiệu ứng jQuery (hiện, ẩn, trượt, phai màu, chuyển động,....) trước khi hiệu ứng đó được thực thi hoàn thành.

Bắt đầu hiệu ứng

Kết thúc hiệu ứng

Phương thức stop() KHÔNG THAM SỐ

Cú pháp
$(selector).stop();
Ví dụ
$("input[value='radio1']").click(function(){
    $("#abc").slideDown(9000);
})
$("input[value='radio2']").click(function(){
    $("#abc").stop();
})
Xem ví dụ

Phương thức stop() không tham số chỉ dùng để kết thúc hiệu ứng hiện tại.

Nếu một phần tử có nhiều hiệu ứng thì các hiệu ứng phía sau hiệu ứng hiện tại vẫn được thực thi.

Ví dụ:

  • Khi bạn bấm vào nút BẮT ĐẦU bên dưới thì phần tử sẽ có bốn hiệu ứng liên tiếp (qua phải, lên, qua trái, xuống)
  • Sau đó, bạn bấm vào nút KẾT THÚC thì hiệu ứng hiện tại sẽ kết thúc, nhưng các hiệu ứng phía sau sẽ tiếp tục được thực thi.

BẮT ĐẦU     KẾT THÚC

Phương thức stop() MỘT THAM SỐ

Phương thức stop() một tham số dùng để xác định việc kết thúc tất cả hiệu ứng của một phần tử.

Cú pháp
$(selector).stop(true|false);

Trong đó:

  • Giá trị true - kết thúc tất cả các hiệu ứng của phần tử.
  • Giá trị false - chỉ kết thúc hiệu ứng hiện tại của phần tử (giá trị này là mặc định).
Ví dụ
$("input[value='radio1']").click(function(){
    $("#abc").animate({left:'300px'},5000);
    $("#abc").animate({top:'300px'},5000);
    $("#abc").animate({left:'0px'},5000);
    $("#abc").animate({top:'0px'},5000);
})
$("input[value='radio2']").click(function(){
    $("#abc").stop(true);
})
Xem ví dụ

Phương thức stop() HAI THAM SỐ

Phương thức stop() hai tham số dùng để:

  • Xác định việc kết thúc tất cả hiệu ứng của một phần tử.
  • Xác định việc đạt đến trạng thái cuối cùng của hiệu ứng hiện tại.
Cú pháp
$(selector).stop(true|false, true|false);

Trong đó:

  • Tham số thứ nhất dùng để xác định việc kết thúc tất cả hiệu ứng của phần tử (cách sử dụng giống như trong phương thức stop() một tham số)
  • Tham số thứ hai dùng để xác định việc đạt đến trạng thái cuối cùng của hiệu ứng hiện tại.
    • Giá trị true - hiệu ứng hiện trạng sẽ đạt đến trạng thái cuối cùng
    • Giá trị false - hiệu ứng hiện tại không đạt đến trạng thái cuối cùng (giá trị này là mặc định)
Ví dụ
$("input[value='radio1']").click(function(){
    $("#abc").animate({left:'450px'},5000);
    $("#abc").animate({top:'300px'},5000);
    $("#abc").animate({left:'0px'},5000);
    $("#abc").animate({top:'0px'},5000);
})
$("input[value='radio2']").click(function(){
    $("#abc").stop(false, true);
})
Xem ví dụ