Подождите, пока логотип загрузится, исчезнет логотип, исчезнет после задержки, затем исчезнет в остальной части сайта

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

Отличная вещь о 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/

Answer 2

Я играл с кодом, представленной 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"); 
     }); 
    }); 
});