<!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 );
//$.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') );
$(document).dequeue('q1');
$(document).dequeue('q1');
});
//[ ]
</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(){
$(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();
}).animate({left : 300},2000); */
/*$(this).animate({width : 300},2000,function(){
//$(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 );
//console.log( $.queue( document , 'q1') );
$.dequeue( document , 'q1' );*/
function aaa(){
alert(1);
}
function bbb(){
alert(2);
}
$(document).queue('q1',aaa);
$(document).queue('q1',bbb);
$(document).queue('q1');
//$(document).dequeue('q1');
//$(document).dequeue('q1');
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
jQuery.extend({
queue: function( elem, type, data ) {//type：队列的名字，和data要存的数据
var queue;
if ( elem ) {//元素要存在的时候，才有后续的操作
type = ( type || "fx" ) + "queue";
queue = data_priv.get( elem, type );
// Speed up dequeue by getting out quickly if this is just a lookup
if ( data ) {
//看队列中是否存在，如果不存在就如if进行创建，如果存在，则走else，进行添加的操作
if ( !queue || jQuery.isArray( data ) ) {
queue = data_priv.access( elem, type, jQuery.makeArray(data) );
} else {
queue.push( data );
}
}
return queue || [];
}
},
dequeue: function( elem, type ) {
type = type || "fx";
var queue = jQuery.queue( elem, type ),//得到队列
startLength = queue.length,//得到队列的长度
fn = queue.shift(),//队列数组中的第一项
hooks = jQuery._queueHooks( elem, type ),
next = function() {
jQuery.dequeue( elem, type );
};
// If the fx queue is dequeued, always remove the progress sentinel
if ( fn === "inprogress" ) {
fn = queue.shift();
startLength--;
}
if ( fn ) {
// Add a progress sentinel to prevent the fx queue from being
// automatically dequeued
if ( type === "fx" ) {
queue.unshift( "inprogress" );
}
// clear up the last queue stop function
delete hooks.stop;
fn.call( elem, next, hooks );
}
if ( !startLength && hooks ) {
hooks.empty.fire();
}
},
// not intended for public consumption - generates a queueHooks object, or returns the current one
_queueHooks: function( elem, type ) { //出队操作之后，清理一下队列
var key = type + "queueHooks";
return data_priv.get( elem, key ) || data_priv.access( elem, key, {
empty: jQuery.Callbacks("once memory").add(function() {
data_priv.remove( elem, [ type + "queue", key ] );
})
});
}
});
jQuery.fn.extend({
queue: function( type, data ) {
var setter = 2;
if ( typeof type !== "string" ) {
data = type;
type = "fx";
setter--;
}
if ( arguments.length < setter ) {
return jQuery.queue( this[0], type );
}
return data === undefined ?
this :
this.each(function() {
var queue = jQuery.queue( this, type, data );
// ensure a hooks for this queue
jQuery._queueHooks( this, type );
if ( type === "fx" && queue[0] !== "inprogress" ) {//第一项立即出队的操作
jQuery.dequeue( this, type );
}
});
},
dequeue: function( type ) {
return this.each(function() {
jQuery.dequeue( this, type );
});
},
// Based off of the plugin by Clint Helfers, with permission.
// http://blindsignals.com/index.php/2009/07/jquery-delay/
delay: function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
type = type || "fx";
return this.queue( type, function( next, hooks ) {
var timeout = setTimeout( next, time );
hooks.stop = function() {
clearTimeout( timeout );
};
});
},
clearQueue: function( type ) {
return this.queue( type || "fx", [] );
},
// Get a promise resolved when queues of a certain type
// are emptied (fx is the type by default)
promise: function( type, obj ) {
var tmp,
count = 1,
defer = jQuery.Deferred(),
elements = this,
i = this.length,
resolve = function() {
if ( !( --count ) ) {
defer.resolveWith( elements, [ elements ] );
}
};
if ( typeof type !== "string" ) {
obj = type;
type = undefined;
}
type = type || "fx";
while( i-- ) {
tmp = data_priv.get( elements[ i ], type + "queueHooks" );
if ( tmp && tmp.empty ) {
count++;
tmp.empty.add( resolve );
}
}
resolve();
return defer.promise( obj );
}
});
});
955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
