Question

我想为我拥有的4个功能添加延迟。

我试图像在这里一样增加延迟，但这不起作用。

$('.navList .li1').toggleClass('li1Active');
$('.navList .li2').delay(2000).toggleClass('li2Active');
$('.navList .li3').delay(2000).toggleClass('li3Active');
$('.navList .li4').delay(2000).toggleClass('li4Active');

Answer 1

var elem = document.getElementsByTagName("LI");

for (i = 0; i < elem.length; i++) {
    highlight(elem[i], i*2000);
}

function highlight(elem, timeout) {
  setTimeout(function() {
    $(elem).toggleClass("red");
  }, timeout)
}

Answer 2

您可以像这样调用函数并设置时间间隔

   $(document).ready(function() {
     $('.navList .li1').toggleClass('li1Active');
      //create function and call in  setTimeout
     function addActive() {     
      $('.navList .li2').toggleClass('li2Active');
      $('.navList .li3').toggleClass('li3Active');
      $('.navList .li4').toggleClass('li4Active');
     }

     // use setTimeout() to execute
     setTimeout(addActive, 2000);

    });

Answer 3

您正在尝试添加延迟时间，然后再执行操作。因此，更好的方法是调用一个函数并传递选择器和类以在那里进行切换。像这样：

function addDelay(selector, toggleClass, delay) {
  setTimeout(function () {
    $(selector).toggleClass(toggleClass);
  }, delay);
}

然后像这样调用函数：

$('.navList .li1').toggleClass('li1Active');
addDelay('.navList .li2', 'li2Active', 2000);
addDelay('.navList .li3', 'li3Active', 2000);
addDelay('.navList .li4', 'li4Active', 2000);

jQuery：如何在函数后添加延迟

3 个答案: