等待徽标加载，淡入徽标，延迟后淡出，然后淡入网站的其他部分

Question

我是jquery的新手，对以下代码有问题。我想等待我的徽标加载，然后将其淡入。在屏幕上保持一段时间，淡出，然后在网站的其他部分淡入。我需要等待徽标加载，因为我的第一个jquery文件在完成加载之前会在徽标中褪色。我的jquery如下：

$("#logo").bind("load", function () {
    $(this).fadeIn(1500, function() { 
        $(this).delay(4500).fadeOut(1500, function() {
        $(".headerwrapperhome")
            .css({ opacity:0, visibility:"visible" })
            .animate({ opacity:1 }, "slow");
        $("#firstwrapper")
            .css({ opacity:0, visibility:"visible" })
            .animate({ opacity:1 }, "slow"); 
        });
    });
});

目前，我看到的只是一个黑色屏幕（网站的背景色）

正如我所说，我是jquery的新手，所以它可能很容易修复。

感谢您帮助

Answer 1

我使用了whitebOx提供的代码，这似乎提供了一个合适的解决方案。我的代码和他的代码的熔炉：

$(document).ready(function () {

    $('#logo').hide(0).delay(3000).fadeIn(1500, function () {
        $(this).delay(4000).fadeOut (1500, function () {
            $(".headerwrapperhome, #firstwrapper")
  .css({ opacity:0, visibility:"visible" })
  .animate({ opacity:1 }, "slow");
        });
    });
});

Answer 2

jQuery的酷之处在于，它可以将函数链接在一起，并且一些函数（幸运的是，在您的情况下"FadeIn/Out"带有回调函数）！

$(document).ready(function () {
    // simplest solution    
    $('img').hide(0).delay(3000).fadeIn(333, function () {
        $(this).fadeOut(333, function () {
            $('#content').fadeIn(333);
        });
    });
});

http://jsfiddle.net/whiteb0x/JRtGS/