2011-01-21 50 views
0

我有我搬出主容器上的document.ready和window.load的Webkit閃爍文字是應該被隱藏頁面加載

使用動畫()在WebKit瀏覽器在 動畫的幾個元素,來自其中一個元素的文本短暫閃爍在屏幕上。它在非webkit瀏覽器上運行良好。

下面的代碼:

 <header> 
     <div id="logo"> 
      <h1 class="ir">Blank Consultants Inc.</h1> 
      <a href="index.html"><img src="images/logo.gif" alt="Pro-edge logo" width="258" height="158" /></a> 
      <h2 id="tagline">Powerful. Effective. Creative.</h2> 
     </div> 

     <div id="contact"> 
      <a id="email" href="mailto:[email protected]">Email: [email protected]</a> 
      <p id="number">Toll-Free: 5555555</p> 
     </div> 

     <nav id="nav"> 
      <a href="/">home</a> 
      <a href="/">what we do</a> 
      <a href="/">blogs</a> 
      <a href="/">cosmo</a> 
      <a href="/">team</a> 
      <a href="/">contact us</a> 
     </nav> 

     <div id="header-image" class="clear"> 
      <img src="images/mainPage.jpg" width="960" height="283" /> 
     </div> 
    </header> 

的JavaScript:

$(document).ready(function() { 
    $('#logo').css('left', '-455px'); 
    $('#contact').css('right', '-455px'); 
    $('nav').css('top', '-180px'); 

    $(window).bind("load", function() { 
     $('nav').animate({ 'top': 0 }, 1200, 'swing'); 
     $('#logo').animate({ 'left': 0 }, 1250, 'easeOutExpo'); 
     var x = function() { 
      $('#contact').animate({ 'right': 0 }, 1250, 'easeOutExpo'); 
     }; 
     setTimeout(x, 170); 
    }); 
}); 

我想只是用CSS3做這個WebKit中,但我真的很想知道 是什麼導致了這問題。

謝謝!

+0

這也會發生在連接速度較慢的其他瀏覽器中。 – SLaks 2011-01-21 03:44:31

回答

1

只有在頁面完成加載後纔會隱藏您的元素。
在此之前,它們將可見。

你應該把Javascript放在元素後面,而不是等待頁面加載。

你也可以使用CSS來隱藏元素,但是這會讓你的網站在沒有Javascript的情況下破壞你的網站。

+0

我認爲,因爲我把代碼放在$(document).ready()中,它應該在頁面加載之前隱藏元素? 另外,「將JS放在元素後面」是什麼意思? 謝謝! – 2011-01-21 04:31:52

0

我懷疑元素顯示時間和腳本運行時間有短暫的延遲。您可以嘗試隱藏HTML中的元素,然後在文檔加載時在JavaScript中顯示它們。這將防止您所指的閃爍效果。