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 类用于隐藏关于页面，直到用户单击关于链接。

.hidden {
    display: none;
}

.show {
    display: inline;
}

Answer 1

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

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

这样，#about 将在#start 淡出后立即淡入。如果你想要不同的动画，你可以使用 animate指定动画的方法。

您也可以使用 setTimeout 方法，但据我所知，您希望一个 div 消失而另一个 div 紧随其后出现。我认为在这种情况下链接两个动画是更好的选择。

此外，@pszaba 是对的。您不应该使用 onclick 属性。您应该使用像 click 这样的事件处理程序像这样的处理程序:

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

(这段代码实际上没有意义，因为#about 元素是不可见的，所以它不能被点击:)请将它作为您自己实现的引用。)