博客

jQuery queue()的例子

  • Post category:jquery

jQuery queue()是一个非常有用的方法，可以让你同时执行多个动画或操作，从而增强用户体验。下面介绍jQuery queue()方法的文档和两个实际示例：

jQuery queue()方法

jQuery queue()方法用于操作动画队列。动画队列通常用于让多个动画依次执行。jQuery queue()方法同时还支持让多个自定义函数按照一定顺序执行。

语法

$(selector).queue(function)
$(selector).queue(queueName,function)
$(selector).queue(queueName)
$(selector).dequeue()
$(selector).clearQueue()

参数说明：

  • function：需要入队列的函数
  • queueName：字符串类型，用于命名队列
  • dequeue()：触发队列中函数的执行
  • clearQueue()：清除队列中未执行的函数

示例1：jQuery动画队列

在这个例子中，我们将创建一个动画队列。当一个小球被点击时，它将开始向右移动，同时其他小球将开始进行不同的动画。这些动画将放在队列中，以便它们将按照顺序执行。

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery queue() demo</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: #ccc;
        position: relative;
    }
    .ball {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        position: absolute;
        top: 40px;
        background-color: #0099FF;
        animation: bounce 2s ease infinite;
    }
    .ball2 {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 50px;
        background-color: #FFCCCC;
    }
    .ball3 {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        position: absolute;
        top: 80px;
        left: 80px;
        background-color: #FF99CC;
    }
    @keyframes bounce {
        from {top: 0;}
        to {top: 80px;}
    }
</style>
</head>
<body>
<div id="box">
    <div class="ball"></div>
    <div class="ball ball2"></div>
    <div class="ball ball3"></div>
</div>
<script>
$(document).ready(function(){
    $(".ball").click(function(){
        $(this).animate({left:'100px'})
                .animate({top:'100px'})
                .animate({left:'0px'})
                .animate({top:'40px'});
        $(".ball2").delay(400).queue(function(){
            $(this).animate({left:'100px'},1000);
            $(this).dequeue();
        }).fadeIn().fadeOut();
        $(".ball3").delay(800).queue(function(){
            $(this).animate({left:'100px'},1000);
            $(this).dequeue();
        }).fadeIn().fadeOut();
    });
});
</script>
</body>
</html>

在上面的例子中，我们为每个小球设置了不同的动画。每个动画都是使用jQuery的animate()方法创建的。然后我们将动画放到队列中。我们在小球被点击时开始执行队列中的动画。

示例2：自定义的函数队列

在这个例子中，我们将创建一个自定义函数队列。当点击按钮时，将按照顺序调用这些函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery queue() demo</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <button id="start">开始</button>
    <div id="result"></div>
    <script>
    // 创建自定义函数队列
    $("button").click(function() {
        $("#result").html("");
        $("div:eq(0)").queue("steps", [
            function() {
                $("#result").append("<div>步骤1:获取数据</div>");
                $(this).dequeue("steps");
            },
            function() {
                $("#result").append("<div>步骤2:处理数据</div>");
                $(this).dequeue("steps");
            },
            function() {
                $("#result").append("<div>步骤3:显示结果</div>");
                $(this).dequeue("steps");
            },
            function() {
                $("#result").append("<div>已完成</div>");
                $(this).dequeue("steps");
            }
        ])
        .dequeue("steps"); // 开始执行自定义队列
    });
    </script>
</body>
</html>

在上面的代码中，我们定义了一个自定义函数队列。它包含了四个步骤：获取数据、处理数据、显示结果和完成。当按钮被点击时，我们开始执行该队列。每个步骤都是一个function返回一个字符串，用于标识该步骤，并将其添加到结果div中。调用$(this).dequeue(“steps”)以让队列依次执行。

Tags: