🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# jQuery 遍历 - queue() 方法 ## 实例 显示队列的长度: ``` function showIt() { var n = div.queue("fx"); $("span").text( n.length ); setTimeout(showIt, 100); } ``` ## 定义和用法 queue() 方法显示或操作在匹配元素上执行的函数队列。 ### 语法 ``` .queue(_queueName_) ``` | 参数 | 描述 | | --- | --- | | _queueName_ | 可选。字符串值,包含序列的名称。默认是 fx, 标准的效果序列。 | ## 操作队列 queue() 方法操作在匹配元素上执行的函数队列。 ### 语法 ``` .queue(_queueName_,_newQueue_) ``` | 参数 | 描述 | | --- | --- | | _queueName_ | 可选。字符串值,包含序列的名称。默认是 fx, 标准的效果序列。 | ### 详细说明 每个元素均可拥有一到多个由 jQuery 添加的函数队列。在大多数应用程序中,只使用一个队列(名为 fx)。队列运行在元素上异步地调用动作序列,而不会终止程序执行。典型例子时调用元素上的多个动画方法。例如: ``` $('#foo').slideUp().fadeIn(); ``` 当这条语句执行时,元素会立即开始其滑动动画,但是淡入过渡被置于 fx 队列,只有当滑动过渡完成后才会被调用。 .queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用;它允许我们在队列末端放置一个新函数。 这个特性与动画方法提供回调函数类似,但是无需在动画执行时设置回调函数。 ``` $('#foo').slideUp(); $('#foo').queue(function() { alert('Animation complete.'); $(this).dequeue(); }); ``` 等价于: ``` $('#foo').slideUp(function() { alert('Animation complete.'); }); ``` 请注意,当通过 .queue() 添加函数时,我们应当确保最终调用了 .dequeue(),这样下一个排队的函数才能执行。 ### 例子 1 对自定义函数进行队列操作: ``` $(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(); }); ``` ### 例子 2 设置队列数组来删除队列: ``` $("#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(); }); ```