2

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

该脚本实际上工作正常，除了当您第一次加载页面时，整个页面都属于style="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>

就目前而言，当页面加载时没有显示直到 delay.fadeIn() 被执行......我希望加载其他“社交”图像并且 #logo 独立加载 [使用 delay.fadeIn( )]。

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

4

4 回答 4

3

更新的答案，一个真正有效的答案将您的 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 版本的不透明度......

于 2012-09-27T22:17:08.103 回答
3

没有</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-27T21:41:51.860 回答
1

只是一个想法，但我建议您在 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-27T21:46:25.467 回答
1

实际上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而不是使用 deprecated <center>。

于 2012-09-27T21:47:26.367 回答