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

  • .finish(): Ngăn chặn các hình ảnh động (animate) đang chạy, loại bỏ ngay lập tức các hành động tiếp theo và hoàn thành các hành động này.

Cấu trúc

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

.finish(queue)

queue: hành động chờ đợi tiếp theo, nếu không sử dụng giá trị này thì phương thức .finish() sẽ dừng lại tất cả các hành động tiếp theo.

$('.test').finish();

.finish(Mục tiêu)

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: blue;
    height: 50px;
    width: 50px;
}
</style>
<script>
$(function(){
    $('#start').click(function(){
        $('div').animate({height:130},1000);
        $('div').animate({width:300},1000);
        $('div').animate({height:50},1000);
    });
    $('#finish').click(function(){
        $('div').finish();
    });
});
</script>
</head>

<body>
<button id="start">Start</button>
<button id="finish">Finish</button>
<div></div>
</body>
</html>

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

Khi click vào button Finish, ta đã kích hoạt .finish() ta đã loại bỏ tất cả các hành động tiếp theo và dừng ở hành động cuối cùng.