JQuery淡入延遲

我試圖讓我的主要標誌圖像淡入（使用jquery）後一定的延遲。當你第一次加載頁面時，整個頁面落在下style="display:none"JQuery淡入延遲

我只希望徽標display:none不是整個頁面

的腳本實際上EXCEPT工作正常。有什麼我失蹤？一些標籤我沒有關閉？這裏是鏈接：My Website 這裏是代碼[Java腳本]：

`<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() { 
     $('#logo').delay(1500).fadeIn(1500); 
}); 
</script>

這裏是HTML：

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="display:none;" /> 
<center><ul class="social"> 
    <li><a href="http://www.facebook.com/madeclothiers"><img src="img/facebook.png" class="social"></a></li> 
    <li><a href="http://www.twitter.com/madeclothiers"><img src="img/twitter.png" class="social"></a></li> 
    <li><a href="http://www.madeclothiers.tumblr.com/"><img src="img/tumblr.png" class="social"></a></li> 
    <li><a href="http://web.stagram.com/n/madeclothiers"><img src="img/instagram.png" class="social"></a></li> 
</ul></center>

目前的情況是，當頁面加載沒有任何顯示，直到延遲.fadeIn（）被執行...我想要加載其他「社交」圖像和#logo以獨立加載[使用delay.fadeIn（）]。

感謝， [編輯：我固定img標籤和UL標籤，但仍對圖像的「社會」的圖像加載不走]

來源

2012-09-27 Shade

'img'是一個空標籤，不應該有結束標籤。也'center'是非常，非常過時 –

這樣 – geekman

– geekman

更新的答案，其中一個實際工作修改jQuery腳本以下

$(document).ready(function() { 
     $('#logo').css({ opacity: 1}); 
});

這從圖像

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" />

添加到您的CSS

.clothingLogo { 
    opacity: 0.001; 
    transition: opacity 1.5s 1.5s; 
    -moz-transition: opacity 1.5s 1.5s; 
    -webkit-transition: opacity 1.5s 1.5s; 
    -o-transition: opacity 1.5s 1.5s; 
    -ms-transition: opacity 1.5s 1.5s; 
    -khtml-transition: opacity 1.5s 1.5s; 
}

刪除所有造型測試Firefox和鉻，如果你想你可以找到一些oth呃方式來表達不透明的古董即版本...

來源

2012-09-27 22:17:08 xception

工作！一切都很好......非常感謝！ – Shade

沒問題，只要我在身邊 – xception

沒有</img>標籤。使其成爲<img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="display:none;" />。

瀏覽器可能會因此而窒息，因此不會顯示任何其他內容。

我發現你的問題。在你的樣式設置：

ul.social{ 
    list-style-type: none; 
    margin-top: -12%; // <- problem is here 
    text-aling: center; 
}

時#form是隱藏的，ul.social是在頁面的頂部。與margin-top: -12%它是12％以上的可見區域 ........

PS：發送啤酒和蛋糕到我家並驗證您的HTML！

來源

2012-09-27 21:41:51

我也嘗試過......並且仍然是'display：none'主宰它下面的所有東西。 – Shade

我看不到任何隱藏的原因。檢查你的CSS！ –

我檢查了你的網站代碼，我同意Gung Foo。你需要在標籤末尾加上斜線（注意style =「display：none;」之後） –

僅僅是一個想法，但我建議你設置寬度和高度爲你的CSS的標誌形象，並嘗試使用opacity: 0.001代替display: none在它的風格，你可能會發現它的作品更好，因爲圖像獲取的下載請求的時刻瀏覽器打img標籤，而不是在jQuery的啓動開關不透明度

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="opacity: 0.001; width: 1024px; height: 768px;" />

來源

2012-09-27 21:46:25 xception

'知名度：隱藏;' –

@MattWhipple也應該工作，我只是喜歡不透明的方式，因爲這是jquery會玩的東西:) – xception

我試過'不透明度'技巧，它確實修復了我的社交按鈕，但現在標識圖像確實加載...所以我將它返回到'display：none' – Shade

其實img標籤應該如下

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="display:none;" />

，你可以使用下面的JavaScript，而不是

<script type="text/javascript"> 
    $(document).ready(function() { 
     setTimeout(function(){ 
      $('#logo').fadeIn(1500); 
     }, 1500); 
    }); 
</script>

，也是你的<ul>標籤應該有一個關閉標籤像</ul>和使用css/style居中您ul而不是使用過時<center>。

來源

2012-09-27 21:47:26

JQuery淡入延遲

回答

相關問題