JQuery在延遲后淡出

Question

我試圖讓我的主徽標圖像在一定延遲后淡入（使用Jquery）。

該腳本實際上工作正常除了當你第一次加載頁面時，整個頁面屬於style="display:none"

我只想要display:none徽標display:none整個頁面。 有什么我想念的嗎？ 有些標簽我沒有關閉？ 這是鏈接： 我的網站這里是代碼[Javascript]：

`<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>

就像現在一樣，當頁面加載NOTHING顯示，直到執行delay.fadeIn（）...我希望加載其他“社交”圖像，並且#logo在其上獨立加載[使用delay.fadeIn（ ）]。

謝謝，[編輯：我修復了img標簽和ul標簽，但仍然沒有繼續圖片“社交”圖片加載]

Answer 1

沒有</img>標簽。 make it <img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="display:none;" /> <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！

Answer 2

更新的答案，一個實際工作的修改您的jquery腳本到以下

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

將此添加到您的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;
}

從圖像中刪除所有樣式

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

測試了firefox和chrome，如果你想要你可以找到一些其他方式來表達古董的不透明度即版本......

Answer 3

只是一個想法，但我建議你在你的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;" />

Answer 4

實際上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> 。