我的jQuery第八天 animate作中的queue队列

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

九依

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

阅读量208

点赞数

分类专栏：小白文章标签： jquery js

本文链接：https://blog.csdn.net/Yzhoun/article/details/107348549

版权

小白专栏收录该内容

39 篇文章 0 订阅

订阅专栏

我的jQuery第八天

jQuery中的animate作中的queue队列

queue and dequeue and clearQueue

 <style>
        .demo{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="demo"></div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        // queue
        // type content,可以传两个参数，第一个参数是名称，第二个是函数
        // jQ{chain : []} 在jQ对象中创建三个数组每一个索引是一个方法
        $('.demo').queue('chain',function(next){
            console.log('over1')
            next();
        }).queue('chain',function(next){
            console.log('over2')
             next();
        }).queue('chain',function(next){
            console.log('over3')
        })
        console.log($('.demo').queue('chain'))
        $('.demo').dequeue('chain');
        //$('.demo').clearQueue()清空队列，所有队列
        //在函数中加入next就相当于在执行的最后一段取next一直将队列执行完。
        //当执行完去输出dequeue的时候，chain的数组为空
        //如果不加next，则每一次执行dequeue的时候只会执行一次队列
    </script>

队列结合animate

<script>
    $('.demo').on('click',function(){
            $(this).dequeue('chain'); 
        }).queue('chain', function(next){
            $(this).animate({width:220,height:220,left:100,top:100})
            next()
        }).queue('chain', function(next){
            $(this).animate({width:340,height:340,left:340,top:340})
            next()
        }).queue('chain', function(next){
            $(this).animate({width:460,height:460,left:460,top:460})
            next()
        })
</script>

九依

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的jQuery第八天 animate作中的queue队列

我的jQuery第八天jQuery中的animate作中的queue队列queue and dequeue and clearQueue <style> .demo{ width: 100px; height: 100px; background-color: aquamarine; } </style></head><body>
复制链接

扫一扫