等待加載徽標，淡入徽標，延遲後淡出，然後淡入網站的其餘部分

我是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所以它可能是一些簡單的修復。

感謝您的幫助

來源

2013-06-27 user2518028

是'$（「＃logo」）'''？可能會創建一個[jsfiddle]（http://jsfiddle.net/） – SpYk3HH

您需要在元素加載之前綁定加載事件，這會成爲緩存圖像的問題，因爲所述事件將立即發生且同步發生。您需要使用預加載技術。 –

是的。這是一個PNG文件，用css作爲背景圖像加載到div徽標中。 – user2518028

關於jQuery的很酷的事情是它可以讓你鏈職能在一起，而有些功能（幸運的是，你的情況「淡入/輸出」配備了一個回調函數）！

$(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/

來源

2013-06-27 19:29:29 iamwhitebox

我嘗試了一些類似於此的內容，但效果並不理想，因爲徽標之後的內容是小圖像的鑲嵌。我希望那些繼續加載，而徽標是淡入，持有和淡出，以便在徽標已淡出時，訪問者看到馬賽克已加載 – user2518028

謝謝接受 - 我認爲這將是一個很好的開始點 – iamwhitebox

我與由白盒提供的代碼發揮周圍，這似乎提供合適的解決方案。我的代碼和他的大熔爐：

$(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"); 
     }); 
    }); 
});

來源

2013-06-28 08:43:44 user2518028

等待加載徽標，淡入徽標，延遲後淡出，然後淡入網站的其餘部分

回答

相關問題