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

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

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.

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

Cú pháp: $(selector).stop();

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[value='radio1']").click(function(){
            $("#abc").slideDown(9000);
        })
        $("input[value='radio2']").click(function(){
            $("#abc").stop();
        })
    })
</script>
</head>
<body>
  <p><input type="radio" name="radio" value="radio1"> BẮT ĐẦU hiệu ứng</p>
  <p><input type="radio" name="radio" value="radio2" checked> KẾT THÚC hiệu ứng</p>
  <div style="background-color:brown;height:400px;display:none;" id="abc"></div>
</body>
</html>

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.

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ụ:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("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);
        })
    })
</script>
<style type="text/css">
    div{
        background-color:brown;
        height:50px;
        width:50px;
        position:relative;
   }
</style>
</head>
<body>
  <p><input type="radio" name="radio" value="radio1"> BẮT ĐẦU</p>
  <p><input type="radio" name="radio" value="radio2" checked> KẾT THÚC</p>
  <div id="abc"></div>
</body>
</html>

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ụ:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("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);
        })
    })
</script>
<style type="text/css">
    div{
        background-color:brown;
        height:50px;
        width:50px;
        position:relative;
   }
</style>
</head>
<body>
  <p><input type="radio" name="radio" value="radio1"> BẮT ĐẦU</p>
  <p><input type="radio" name="radio" value="radio2" checked> KẾT THÚC</p>
  <div id="abc"></div>
</body>
</html>