jQ动画队列

最新推荐文章于 2022-01-13 08:45:41 发布

little_蔷薇

最新推荐文章于 2022-01-13 08:45:41 发布

阅读量769

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jQ动画队列

本文链接：https://blog.youkuaiyun.com/qq_34559257/article/details/80335509

前端专栏收录该内容

19 篇文章

订阅专栏

本文详细探讨了jQuery中的动画队列机制，通过实例展示了如何通过点击按钮触发不同的动画效果，并有序执行这些操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 $('input').first().click(function () {
                // 每次点击
                // 增加 2个动画
                // 多次点击 会增加 次数*2个动画
                // 可以想象为 一个数组
                // 每次增加两个元素
                // jQ会每次取出第一个动画 播放 播放完毕 继续播放下一个
                // [动画1,动画2,动画3,.....];
                // jQ动画队列(数组,水管)
                // $('div').slideDown(2000).slideUp(2000);
                // delay 为动画队列增加延迟时间 
                // 下拉 ,2秒,上拉
                $('div').slideDown(500).delay(200).slideUp(500);
            })

            // 停止动画
            $('input').last().click(function () {
                // 不传入任何的参数
                // 停止当前的动画 ,继续播放 下一个动画
                // $('div').stop();
                // 传递参数 停止多个动画
                /*
                    参数1:是否清除动画队列
                    参数2:是否 让动画播放完毕
                */ 
                // 清除队列 动画直接到结束状态
                // $('div').stop(true,true);

                // 清除队列  动画停止在 当前的状态
                // $('div').stop(true,false);

                // 清除当前动画,继续播放下一个(默认值)                
                // $('div').stop(false,false);
                // 不清空队列 当前动画 理解播放完毕 开启下一个动画
                $('div').stop(true,true);  
            })
    


    <input type="button" value="开启动画">
    <input type="button" value="关闭动画">
    <br>
    <div></div>

下面是div的样式，通过点击上面不同的button，触发不同的事件，执行不同的操作。

div {
            width: 100px;
            height: 200px;
            background-color: skyblue;
            display: none;
        }