4

我有以下 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-Class 更改。在此更改后，它应该再次显示。所以我在-class的添加和删除之间进行设置。为了看看它是否有效，我添加了太长的 3sek 持续时间。#dashboarddelay()standby

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

4

8 回答 8

12

delay只会对通过动画管道的动作起作用，并且不会影响像这样的即时原子操作的时间。为了延迟诸如添加或删除类之类的事情，您可以使用setTimeout.

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

.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，这可能更适合某些用例。

于 2013-07-08T08:50:33.697 回答
5

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

let cancelId;
// ...
cancelId = window.setTimeout(function() {
  // ... do stuff ... 
}, 3000);

// If you want to cancel prematurely, use `window.clearTimeout`
if (cancelId) {
  window.clearTimeout(cancelId);
}

... do stuff ...这将在 3 秒（3000 毫秒）内执行代码

于 2013-07-08T08:50:56.837 回答
3

延迟不会像你期望的那样在这些线上工作：

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

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

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

如果您想将其扩展到许多图像，请尝试使用更强大的“.animate”函数来淡入和淡出。可以给“Animate”一个回调函数，该函数将在完成时调用。

于 2015-09-15T20:26:02.617 回答
3

如前所述......延迟不会像您期望的那样工作......这是它的工作原理：

$(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); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<img src="" id="image1">

于 2015-09-15T20:29:03.053 回答
2

你所有的延误开始于$(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

我留下这个以防有人像我一样感到困惑

于 2015-09-15T20:27:48.627 回答
2

尝试利用.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")
    });
于 2015-09-15T20:35:56.733 回答
0

似乎对于您正在尝试做的事情，您可能想看看 CSS 过渡：

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

您仍然可以拥有.addClass().delay()，但现在您的课程将使用这些转换属性，并且您不需要 .delay()。

于 2013-07-08T08:54:58.043 回答
0

通常我们需要在移除待机状态之前做一些事情，所以我们在 ajax 回调中移除类：

$("#dashboard").addClass("standby");
$.get('urltoget',function(data){
  if(data)
    $("#dashboard").removeClass("standby");
  else
    $("#dashboard").removeClass("standby").addClass('error');
})
于 2013-07-08T09:00:52.740 回答