queue(e,[q])

返回值

Array/jQuery

概述

显示或操作在匹配元素上执行的函数队列

参数

参数 类型 说明 示例值
element,[queueName] Element,String
v1.3

element:检查附加列队的DOM元素

queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。
element,queueName,newQueue Element,String,Array
v1.3

element:检查附加列队的DOM元素

queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

newQueue:替换当前函数列队内容的数组
element,queueName,callback() Element,String
v1.3

element:检查附加列队的DOM元素

queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

callback():要添加进队列的函数

示例

示例一 显示队列长度

//html代码
<style>  
div { 
    margin:3px; 
    width:40px; 
    height:40px;        
    position:absolute; 
    left:0px;
    top:30px;         
    background:green; 
    display:none;
}  
div.newcolor { 
    background:blue;
}  
span {
    color:red;
}
</style>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>

//jQuery代码
$("#show").click(function () {      
    var n = $("div").queue("fx");      
    $("span").text("Queue length is: " + n.length);
});

function runIt() {     
    $("div").show("slow");      
    $("div").animate({left:'+=200'},2000);      
    $("div").slideToggle(1000);      
    $("div").slideToggle("fast");      
    $("div").animate({left:'-=200'},1500);     
    $("div").hide("slow");      
    $("div").show(1200);     
    $("div").slideUp("normal", runIt);
}

runIt();

示例二 通过设定队列数组来删除动画队列


//html代码
<style>  

div { 
    margin:3px; 
    width:40px;
    height:40px;       
    position:absolute;
    left:0px;
    top:30px;        
    background:green;
    display:none;
} 

div.newcolor {
    background:blue;
}  

</style> 

<button id="start">Start</button>  
<button id="stop">Stop</button>  
<div></div>

//jQuery代码
$("#start").click(function () {     

    $("div").show("slow");     

    $("div").animate({left:'+=200'},5000);     

    $("div").queue(function () {         
        $(this).addClass("newcolor");         
        $(this).dequeue();     
    });     

    $("div").animate({left:'-=200'},1500);  

    $("div").queue(function () {          
        $(this).removeClass("newcolor");         
        $(this).dequeue();     
    });      

    $("div").slideUp(); 
});  

$("#stop").click(function () {      
    $("div").queue("fx", []);      
    $("div").stop();  
});

示例三 插入一个自定义函数 如果函数执行后要继续队列，则执行 jQuery(this).dequeue();


//html代码
<style>  
div { 
    margin:3px;
    width:40px; 
    height:40px;        
    position:absolute; 
    left:0px; 
    top:30px;         
    background:green; 
    display:none; 
}  
div.newcolor { 
    background:blue;
}  

</style>  
Click here...  
<div></div>


//jQuery 代码
$(document.body).click(function () {      
    $("div").show("slow");      
    $("div").animate({left:'+=200'},2000);      
    $("div").queue(function () {          
        $(this).addClass("newcolor");          
        $(this).dequeue();      
    });     

    $("div").animate({left:'-=200'},500); 

    $("div").queue(function () {          
        $(this).removeClass("newcolor");          
        $(this).dequeue();      
    });      

    $("div").slideUp();
});