javascript - 我在 jQuery 中的任何延迟都不起作用

Question

我的脚本:

$(function () {
    $("body").addClass("lost");

    var counter = 0;
    var time = 400;
    var delay = time*5+250;

    if($("body").hasClass("lost")) {
        $("nav").delay(delay).css({'background': 'transparent'});
        $("nav").delay(delay).css({'background-color': '#e30'});
        $(this).find(".slogan").delay(delay).html('USB-stick  is lost');
        var title = "this USB-stick is lost";
    } else {
        var title = "this USB-stick is not lost";
        $(this).find(".slogan").delay(delay).html('USB-stick is not lost');
    }

    var titleTimerId = setInterval(function(){
        document.title = document.title + '.';
        counter++;
        if(counter == 5){
            clearInterval(titleTimerId);
            document.title = title;
        }
    }, time);
});

我想要达到的是，在达到 var 延迟时间后所有内容都发生了变化，并且标题发生了变化，我已经将其放置在脚本的某些元素中，但这对我不起作用

这代表导航:

<nav onclick="window.location=''">
    <img src="//sakesalverda.nl/logo.png" alt="badge html 5" class="logo_nav"/>
    <p>sakesalverda.nl</p>
    <h1 class="slogan">USB-stick</h1>
</nav>

Answer 1

来自 jQuery docs :

the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

css() 和 html() 方法不使用队列，您需要用 queue() 包装它们方法，例如:

$("nav")
    .delay(delay)
    .queue(function (next) {
        $(this).css({'background': 'transparent'});
        next();
    });