将延迟应用于动画jquery

Applying delay to animation jquery

本文关键字：jquery 动画 应用于 延迟      更新时间：2023-09-26

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

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

setTimeout需要一个函数定义作为第一个参数，所以将您想做的任何事情都封装在一个匿名函数中，如下面的

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

您应该将代码（以延迟方式执行的指令）包装在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);
});

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

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

这是一个JSFiddle。另请参阅：jQuery：我可以在addClass（）和such之间调用delay（）吗？

相关文章：