Question

我有以下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。所以我在添加和删除delay() - 类之间设置standby。为了查看它是否有效，我添加了3sek的持续时间过长。

但它并没有延迟！为什么不呢？我没有看到......

Answer 1

delay仅适用于通过动画管道的动作，并且不会对像这样的即时原子操作的时间产生影响。为了延迟添加或删除类等内容，您可以使用setTimeout。

.delay（）方法允许我们延迟队列中跟随它的函数的执行。它可以与标准效果队列一起使用，也可以与自定义队列一起使用。

.delay（）方法最适合延迟排队的jQuery效果。因为它是有限的 - 例如，它没有提供取消延迟的方法 - .delay（）不能替代JavaScript的本机setTimeout函数，这可能更适合某些用例。

Answer 2

.delay()只会延迟jQuery中的动画。要设置实际延迟，您可能需要使用setTimeout()。

setTimeout(function() {
... do stuff ... 
}, 3000);

这将在3秒（3000毫秒）

中执行... do stuff ...中的代码

Answer 3

延迟将无法按照您期望的方式在这些行上运行：

$("#image1").delay(9000).attr("src", "image/image1.jpg");
$("#image1").delay(9000).attr("src", "image/image2.jpg");

它将立即运行属性更改。为什么？因为属性更改不是“动画”的一部分。延迟只能与动画功能一起使用。

如果您只需要两张图片，最简单的方法就是将两张图像堆叠在一起，并根据需要将它们淡入淡出。

如果要将其扩展为多个图像，请尝试使用更强大的“.animate”功能淡入淡出。 “Animate”可以被赋予一个回调函数，在完成时将被调用。

Answer 4

如上所述......延迟不会按照你期望的方式工作...... 以下是它的工作原理：

＆＃13;

$(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); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<img src="" id="image1">

＆＃13;

Answer 5

尝试使用.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")
    });

Answer 6

~~所有延迟都从$(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毫秒的延迟，然后是fadeOut()，持续时间为3000毫秒。 fadeOut与延迟同步，但下一行代码与此代码完全异步。

~~然后它进入下一行。等等。它不会等到你的延迟完成，它只是开始依靠背景。~~

.delay()在应用于同一元素时进行堆叠：JSFiddle

我留下这个以防万一有人因我而感到困惑

Answer 7

似乎你想要做什么，你可能想看看CSS过渡：

http://css-tricks.com/almanac/properties/t/transition/

您仍然可以拥有.addClass()，但现在您的班级将使用这些过渡属性，您将不需要.delay（）。

Answer 8

通常我们需要在删除备用状态之前做一些事情，所以我们在ajax回调中删除了这个类：

$("#dashboard").addClass("standby");
$.get('urltoget',function(data){
  if(data)
    $("#dashboard").removeClass("standby");
  else
    $("#dashboard").removeClass("standby").addClass('error');
})

jQuery .delay（）不起作用

8 个答案: