jQuery.queue()
显示或操作匹配的元素上已经执行的函数列队。
jQuery.queue(element[, queueName ])
- jQuery.queue(element[, queueName ])
jQuery.queue(element, queueName, newQueue)
- jQuery.queue(element, queueName, newQueue)
- jQuery.queue(element, queueName, callback())
jQuery.queue(element[, queueName ])
显示在匹配的元素上的已经执行的函数列队。
jQuery.queue(element[, queueName ])
- element类型: Element。一个用于检查附加列队的DOM元素。
- queueName类型: String。一个含有队列名的字符串。默认是
fx
,标准的动画队列。
注意:这是一个底层的方法,你应该用.queue()
代替。
例子
显示列队的长度。
<!DOCTYPE html> <html> <head> <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> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <button id="show">Show Length of Queue</button> <span></span> <div></div> <script> $("#show").click(function () {var n = jQuery.queue( $("div")[0], "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(); </script> </body> </html>
jQuery.queue(element, queueName, newQueue)
操作匹配元素上将要执行的函数队列。
jQuery.queue(element, queueName, newQueue)
- element类型: Element。一个已附加列队函数数组的DOM元素。
- queueName类型: String。一个含有队列名的字符串。默认是
fx
,标准的动画队列。 - newQueue类型: Array。一个替换当前函数列队内容的数组。
注意:这是一个底层的方法,你应该用.queue()
代替。
每个元素可以通过jQuery附加一个或多个函数队列。在大多数程序中,只有一个列队(名为fx
)被使用。队列允许一个元素来异步的访问一连串的操作,而不终止整个程序执行。
jQuery.queue()
方法允许我们直接操纵这个函数队列。最常用的用法是调用jQuery.queue()
时带一个回调函数,这样就能让我们在队列最后的添加一个新的函数。
值得注意的是,当使用jQuery.queue()
添加一个函数的时候,务必确保在函数的最后调用了jQuery.dequeue()
,以便能够执行队列中的下一个函数。
例子:
将一个自定义函数加入到队列中。
<!DOCTYPE html> <html> <head> <style> div { margin:3px; width:40px; height:40px; position:absolute; left:10px; top:30px; background:green; display:none; } div.newcolor { background:blue; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> Click here... <div></div> <script> $(document.body).click(function () { $("div").show("slow"); $("div").animate({left:'+=200'},2000); jQuery.queue( $("div")[0], "fx",function () { $(this ).addClass("newcolor"); jQuery.dequeue(this ); }); $("div").animate({left:'-=200'},500); jQuery.queue( $("div")[0], "fx",function () { $(this ).removeClass("newcolor"); jQuery.dequeue(this ); }); $("div").slideUp(); });</script> </body> </html>
Click here...