.stop()

Định nghĩa và sử dụng

  • .stop(): Dừng chuyển động đang chạy của thành phần phù hợp.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.2

.stop()

$('p').stop().slideDown();
  • Đã được thêm vào từ phiên bản 1.7

.stop(stopAll)

stopAll: Dừng ngay hành động tại thời điểm sử dụng .stop(), có 2 giá trị <true> (dừng) và "fales" (không dừng), mặc định là "false"

$('p').stop(true,true).slideDown();

.stop(stopAll,goToEnd)

stopAll: Dừng ngay hành động tại thời điểm sử dụng .stop(), có 2 giá trị <true> (dừng) và "fales" (không dừng), mặc định là "false"

goToEnd: Dừng tất cả các hành động tại thời điểm sử dụng .stop(), có 2 giá trị <true> (dừng) và "fales" (không dừng), mặc định là "false"

$('p').stop(true,true).slideDown();

.stop(Độ bền)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    float: left;
    margin-right: 20px;
}
.test01, .test02 {
    background-color: yellow;
    display: none;
    height: 100px;
    width: 150px;
}
</style>
<script>
$(function(){
    $('.button01').click(function(){
        $('.test01').slideToggle();
    });
	
	$('.button02').click(function(){
        $('.test02').stop().slideToggle();
    });
});
</script>
</head>

<body>
<div>
Khi chưa sử dụng .stop()
<p><button class="button01">Click</button></p>
<p class="test01">Không .stop()</p>
</div>

<div>
Khi có sử dụng .stop()
<p><button class="button02">Click</button></p>
<p class="test02">Có .stop()</p>
</div>
</body>
</html>

Hiển thị trình duyệt:

Click nhiều lần vào từng button, ta thấy khi chưa có .stop() hành động click nhiều lần sẽ khiến cho hiệu ứng xảy ra liên tục ngay cả khi ta đã dừng click, tuy nhiên khi có .stop() hành động click nhiều lần sẽ bị chặn lại, hiệu ứng sẽ chỉ xảy ra như click một lần đến khi dừng hiệu ứng.

.stop(stopAll)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: yellow;
    height: 50px;
    width: 50px;
    position: relative;
}
</style>
<script>
$(function(){
    $('.start').click(function(){
        $('div').animate({top:100},"slow");
        $('div').animate({left:400},"slow");
        $('div').animate({top:0},"slow");
        $('div').animate({left:0},"slow");
    });
	
    $('.stop').click(function(){
        $('div').stop(true);
    });
});
</script>
</head>

<body>
<p><button class="start">Start</button><button class="stop">stop</button></p>
<div>div</div>
</body>
</html>

Hiển thị trình duyệt:

Click vào button "start" để bắt đầu chuyển động, sau đó click vào "stop" để dùng chuyển động này.

.stop(stopAll, goToEnd)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: yellow;
    height: 50px;
    width: 50px;
    position: relative;
}
</style>
<script>
$(function(){
    $('.start').click(function(){
        $('div').animate({top:100},"slow");
        $('div').animate({left:400},"slow");
        $('div').animate({top:0},"slow");
        $('div').animate({left:0},"slow");
    });
	
    $('.stop').click(function(){
        $('div').stop(true, true);
    });
});
</script>
</head>

<body>
<p><button class="start">Start</button><button class="stop">stop</button></p>
<div>div</div>
</body>
</html>

Hiển thị trình duyệt:

Click vào button "start" để bắt đầu chuyển động, sau đó click vào "stop" để dùng chuyển động này.

.slideUp()

.submit()