javascript - JQuery 延迟后淡入

Question

我试图让我的主 Logo 图像在一定延迟后淡入(使用 Jquery)。

脚本实际上工作正常，除了当您第一次加载页面时，整个页面都在 style="display:none"

我只希望 Logo display:none 而不是整个页面。有什么我想念的吗？有些标签我没有关闭？这是链接:My Website这是代码 [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>

就目前而言，当页面加载时，在执行 delay.fadeIn() 之前没有任何显示...我希望加载其他“社交”图像，并在其上独立加载#logo [使用延迟。淡入()]。

谢谢，[已编辑:我修复了 img 标签和 ul 标签，但仍然无法加载图像“社交”图像]

Answer 1

更新的答案，一个实际有效的将您的 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，如果你愿意，你可以找到一些其他方式来表达古董 ie 版本的不透明度......