<!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>
时间： 2024-08-09 10:37:00