Question

我试图让我的主徽标图像在一定延迟后淡入（使用Jquery）。

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

我只想要徽标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>

现在看来，当页面加载NOTHING显示直到执行delay.fadeIn（）时...我想要加载其他“社交”图像并且#logo在其上独立加载[使用延迟] 。淡入（）]。

谢谢， [编辑：我修复了img标签和ul标签，但仍然没有去图片“社交”图片加载]

Answer 1

没有</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！

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

JQuery在延迟后淡出

4 个答案: