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