Question

我正在尝试将一个类添加到我html中的div中，但是希望在此之前添加一个延迟。我在下面有以下代码，但它似乎没有应用任何类型的延迟。谁能告诉我我做错了什么？

$("#globe").on('ended',function() {
  setTimeout(
    $('.faculty-info').addClass('cbp-spmenu-open'), 
    5000);
});

Answer 1

setTimeout需要一个函数定义作为第一个参数，所以在匿名函数中包装你想做的任何事情，比如下面的文件

setTimeout(function(){
    $('.faculty-info').addClass('cbp-spmenu-open')
}, 5000);

Answer 2

你应该在function中包裹你的代码（以延迟方式执行的指令）。

$("#globe").on('ended',function() {
  setTimeout( function() {
    $('.faculty-info').addClass('cbp-spmenu-open')
  }, 5000);
});

您可能还需要声明一个变量来保存超时值。这将使您有可能在需要时清除它：

//Global timeout variable
var timeOut;

$("#globe").on('ended',function() {
  timeOut = setTimeout( function() {
    $('.faculty-info').addClass('cbp-spmenu-open')
  }, 5000);
});

Answer 3

您可以使用jQuery的.delay()和.queue()来处理此问题：

$("#globe").on('ended', function () {
    $('.faculty-info').delay(5000).queue(function () {
        $(this).addClass('cbp-spmenu-open').dequeue();
    });
});

Here's a JSFiddle。另见：jQuery: Can I call delay() between addClass() and such?

将延迟应用于动画jquery

3 个答案: