javascript - 如何将一个类添加到一个div，让它等待一段时间，然后将另一个类添加到另一个div？

Question

到目前为止，我可以将一个类应用于一个 div，但我希望它随后将另一个类添加到另一个 div 以使该显示和淡入淡出。

http://www.penguinie.co.uk/test/

我希望第一页淡出，关于页面淡入（或项目或联系页面）。

<li><a href="#about" onclick="$('#start').addClass('fadeOutUp'); $('#about').addClass('animated fadeInDown')">About</a></li>

这就是我用来使主页淡出的方法。hidden 类用于隐藏 about 页面，直到用户单击 about 链接。

.hidden {
    display: none;
}

.show {
    display: inline;
}

Answer 1

您可以使用内置的jQuery 方法fadeIn和fadeOut来做到这一点。

$('#start').fadeOut(500, function(){
    $('#about').fadeIn(500);
})

This way, #about will fade in right after #start fades out. If you want different a different animation, you can use the animate method to specify your animation.

You can also use the setTimeout method but as far as I can see, you want one div to disappear and the other div to appear right after. I think chaining two animations would be the better option in this case.

Also, @pszaba is right. You shouldn't use onclick attributes. You should use event handlers like the click handler like this:

$("#about").click(function(){
    $('#start').fadeOut(500, function(){
        $('#about').fadeIn(500);
    });
});

(This code actually doesn't make sense since the #about element is invisible so it cannot be clicked :) Just use it as a reference for your own implementation.)

Answer 2

我认为您正在寻找 setTimeout() 功能：

$('#start').addClass('fadeOutUp');
setTimeout(function() {
   // executed after 2 seconds
   $('#about').addClass('animated fadeInDown');
}, 2000);

编辑：但关于淡入/淡出，你也可以看看$("selector").fadeIn("slow", function(){ /* callback here */ });