jQuery .delay（）不起作用
我有以下JavaScript代码段：
$("#dashboard").addClass("standby").delay(3000).removeClass("standby"); $(".active").removeClass("active"); $("." + target).addClass("active"); $(".showDiv").removeClass("showDiv").addClass("hide"); $("#" + target).removeClass("hide").addClass("showDiv"); 当#dashboard处于待机状态时 ，它应该处理所有这些CSS类更改。 更改后，它应再次显示#dashboard 。 所以我在standby -class的add和remove之间设置了delay() 。 为了看它是否有效，我添加了3sek的持续时间太长。
但它并没有延迟！ 为什么不呢？ 我不明白……
delay仅适用于通过动画管道的动作，并且不会影响像这样的即时primefaces操作的时间。 为了延迟添加或删除类等内容，可以使用setTimeout 。
.delay（）方法允许我们延迟队列中跟随它的函数的执行。 它可以与标准效果队列一起使用，也可以与自定义队列一起使用。
.delay（）方法最适合延迟排队的jQuery效果。 因为它是有限的 – 例如，它没有提供取消延迟的方法 – .delay（）不能替代JavaScript的本机setTimeout函数，这可能更适合某些用例。
如上所述……延迟将无法按照您的预期运作……以下是它的工作原理：
$(document).ready(function(){ var audio = new Audio('sang3.mp3'); audio.play(); $("#image1") .hide() .attr("src", "https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250") .fadeIn(1000) .delay(3000) .fadeOut(1000) .queue(function(next) { $(this).attr("src", "https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-2&w=350&h=250") next(); }) .fadeIn(1000); });
![]()
延迟将无法按照您期望的方式在这些行上运行：
$("#image1").delay(9000).attr("src", "image/image1.jpg"); $("#image1").delay(9000).attr("src", "image/image2.jpg");
它将立即运行属性更改。 为什么？ 因为属性更改不是“动画”的一部分。 延迟只能与动画function一起使用。
如果您只需要两个图像，最简单的方法是将两个图像堆叠在一起，并根据需要将它们淡入淡出。
如果要将其扩展为多个图像，请尝试使用更强大的“.animate”函数淡入淡出。 可以为“Animate”提供一个回调函数，该函数将在完成时调用。
.delay()只会延迟jQuery中的动画。 要设置实际延迟，您可能需要使用setTimeout() 。
setTimeout(function() { ... do stuff ... }, 3000);
尝试使用.queue()
$("#image1").delay(5000).fadeIn(3000, function() { $(this).delay(9000, "task" ).queue("task", function() { $(this).attr("src", "image/image1.jpg") .delay(5000).fadeOut(3000, function() { $(this).delay(9000, "task") .queue("task", function() { $(this).attr("src", "image/image2.jpg") .delay(5000).fadeIn(3000, function() { $(this).delay(5000).fadeOut(3000) }) }).dequeue("task") }); }).dequeue("task") });
你的所有延迟都是从 $(document).ready();
$("#image1").delay(5000).fadeIn(3000); $("#image1").delay(9000).attr("src", "image/image1.jpg"); $("#image1").delay(5000).fadeOut(3000); $("#image1").delay(9000).attr("src", "image/image2.jpg"); $("#image1").delay(5000).fadeIn(3000); $("#image1").delay(5000).fadeOut(3000);
这样想吧。 当doc准备就绪时，JS开始执行该函数内部的任何内容，首先执行的延迟是： $("#image1").delay(5000).fadeIn(3000);
这将启动5000毫秒的延迟，然后是持续时间为3000毫秒的fadeOut() 。 fadeOut与延迟同步，但下一行代码与此完全异步。
然后它进入下一行。 等等。 它不会等到你的延迟完成，它只是开始依靠背景。
.delay()在应用于同一元素时进行堆栈： JSFiddle
我留下这个以防万一有人像我一样困惑
看起来你想要做什么，你可能想看看CSS转换：
http://css-tricks.com/almanac/properties/t/transition/
您仍然可以使用.addClass() ，但现在您的类将使用这些转换属性，并且您不需要.delay（）。
通常我们需要在删除备用状态之前做一些事情，所以我们在ajax回调中删除了类：
$("#dashboard").addClass("standby"); $.get('urltoget',function(data){ if(data) $("#dashboard").removeClass("standby"); else $("#dashboard").removeClass("standby").addClass('error'); })