18/08/2018, 10:49
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ụ ...
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ụ
