jquery12 queue() : 队列方法

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="jquery-2.0.3.js"></script>

<script>

jQuery.extend({

    queue  ------------------- push()

    dequeue --------------  shift()

    _queueHooks

});

jQuery.fn.extend({

    queue

    dequeue

    delay

    clearQueue

    promise

});

//队列中存储的都是函数

$(function(){

    function aaa(){

        alert(1);

    }

    function bbb(){

        alert(2);

    }

    $.queue( document , 'q1' , aaa );//q1是队列名字

    $.queue( document , 'q1' , bbb );

    $.queue( document , 'q1' , [aaa,bbb] );

    console.log(   $.queue( document , 'q1' )   );//输出队列所有函数

    $.dequeue( document,'q1' );   //从头取一个，aaa()

    $.dequeue( document,'q1' );   //从头取，bbb()

    ------------------------------------------------------------------

    function aaa(){

        alert(1);

    }

    function bbb(){

        alert(2);

    }

    $(document).queue('q1',aaa);

    $(document).queue('q1',bbb);

    console.log(  $(document).queue('q1')  );//[aaa,bbb]

    $(document).dequeue('q1');//1

    $(document).dequeue('q1');//2

});

//[   ]

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1{ width:100px; height:100px; background:red; position:absolute;}

</style>

<script src="jquery-2.0.3.js"></script>

<script>

$(function(){

    $('#div1').click(function(){

        //不是一起变化，先宽完了之后在高最后left，使用队列完成。

        $(this).animate({width : 300},2000);     setInterval

        $(this).animate({height : 300},2000);    setInterval

        $(this).animate({left : 300},2000);      setInterval

    });

    $('#div1').click(function(){

        $(this).animate({width : 300},2000).queue(function(next){

            $(this).css('height',300);

            next(); //也可以写成 $(this).dequeue();

        }).animate({left : 300},2000);  

        $(this).animate({width : 300},2000,function(){//第一个animate执行完之后走回调,回调中打开一个定时器就完了，再执行第二个animate,定时器是异步操作，将会跟第二个animate一起进行。

            //$(this).css('height',300);

            var This = this;

            var timer = setInterval(function(){

                This.style.height = This.offsetHeight + 1 + 'px';

                if( This.offsetHeight == 200 ){

                    clearInterval(timer);

                }

            },30);

        }).animate({left : 300},2000);  

        $(this).animate({width : 300},2000).queue(function(next){

            var This = this;

            var timer = setInterval(function(){

                This.style.height = This.offsetHeight + 1 + 'px';

                if( This.offsetHeight == 200 ){

                    next();

                    clearInterval(timer);

                }

            },30);

        }).animate({left : 300},2000); 

    });

    -------------------------------------------------------------

    function aaa(){

        alert(1);

    }

    function bbb(){

        alert(2);

    }

    $.queue( document , 'q1' , aaa );

    $.queue( document , 'q1' , bbb );

    $.queue( document , 'q1' , [ccc] );//ccc是数组时候覆盖aaa,bbb

    console.log(   $.queue( document , 'q1')  );

    $.dequeue( document , 'q1' );//出队时候函数aaa要执行一次

    ----------------------------------------------------------------

    function aaa(){

        alert(1);

    }

    function bbb(){

        alert(2);

    }

    $(document).queue('q1',aaa);

    $(document).queue('q1',bbb);

    console.log( $(document).queue('q1') );//查看[function, function]0:function aaa()1:function bbb()

    $(document).dequeue('q1');

    $(document).dequeue('q1');

});

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1{ width:100px; height:100px; background:red; position:absolute;}

</style>

<script src="jquery-2.0.3.js"></script>

<script>

//delay() : 延迟队列的执行

$(function(){

    $('#div1').click(function(){

        $(this).animate({width : 300},2000).animate({left : 300},2000);

        $(this).animate({width : 300},2000).delay(2000).animate({left : 300},2000);

        //队列全部执行完之后，再去调用

        $(this).promise().done(function(){

            alert(123);

        });

    });

});

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

巴特西

jquery12 queue() : 队列方法

最新文章

热门文章