如何将一个类添加到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>

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

.hidden {
    display: none;
}

.show {
    display: inline;
}

Answer 1

您可以使用内置的jQuery方法fadeIn和fadeOut执行此操作。

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

这样，＃event会在#start淡出后立即淡出。如果您想要不同的动画，可以使用animate方法指定动画。

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

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

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

（这段代码实际上没有意义，因为#about元素是不可见的，因此无法点击:)只需将它作为您自己实现的参考。）

Answer 2

我认为你正在寻找setTimeout（）函数：

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

编辑但关于fadeIn / fadeOut，您还可以查看$("selector").fadeIn("slow", function(){ /* callback here */ });