Love beautiful code? We do too.

  1. Home
  2. Tutorial
  3. Hàm jQuery
  4. .dequeue() trong jQuery
Previous Lesson Next Lesson

.dequeue() trong jQuery

Định nghĩa và sử dụng .dequeue() trong jQuery

.dequeue(): Thực hiện chức năng tiếp theo trên queue cho các thành phần phù hợp.

Cấu trúc .dequeue() trong jQuery

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

.dequeue()
--------------------------------------------------------------------------
$('div').dequeue();

Ví dụ một chuyển động khi chưa sử dụng .dequeue()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: yellow;
    height: 50px;
    left: 10px;
    position: absolute;
    top: 40px;
    width: 50px;
}
div.red {
    background-color: red;
}
</style>
</head>

<body>
<button>Start</button>
<div></div>

<script>
$(function(){
    $("button").click(function () {
        $("div").animate({left:'+=200px'}, 2000);
        $("div").animate({top:'0px'}, 600);
        $("div").queue(function () {
            $(this).toggleClass("red");
        });
        $("div").animate({left:'10px', top:'40px'}, 700);
    });
});
</script>
</body>
</html>

Hiển thị trình duyệt khi chưa có .dequeue():

Ta thấy thành phần chuyển động và dừng lại sau khi đã thực hiện xong function .queue()

Ví dụ một chuyển động khi sử dụng .dequeue()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
div {
    background-color: yellow;
    height: 50px;
    left: 10px;
    position: absolute;
    top: 40px;
    width: 50px;
}
div.red {
    background-color: red;
}
</style>
</head>

<body>
<button>Start</button>
<div></div>

<script>
$(function(){
    $("button").click(function () {
        $("div").animate({left:'+=200px'}, 2000);
        $("div").animate({top:'0px'}, 600);
        $("div").queue(function () {
            $(this).toggleClass("red");
            $(this).dequeue();
        });
        $("div").animate({left:'10px', top:'40px'}, 700);
    });
});
</script>
</body>
</html>

Hiển thị trình duyệt khi có .dequeue():

Ta thấy thành phần sau khi thực hiện xong function .queue() thì ngay lập tức thực hiện tiếp hành động kế tiếp.

Previous Lesson Next Lesson

Viết câu trả lời

Drop Images

0 Bình luận

Danh mục bài học

Hoclaptrinh.vn © 2017

From Coder With