JQuery淡入延迟

我试图让我的主要标志图像淡入（使用jquery）后一定的延迟。当你第一次加载页面时，整个页面落在下style="display:none"JQuery淡入延迟

我只希望徽标display:none不是整个页面

的脚本实际上EXCEPT工作正常。有什么我失踪？一些标签我没有关闭？这里是链接：My Website 这里是代码[Java脚本]：

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

目前的情况是，当页面加载没有任何显示，直到延迟.fadeIn（）被执行...我想要加载其他“社交”图像和#logo以独立加载[使用delay.fadeIn（）]。

感谢， [编辑：我固定img标签和UL标签，但仍对图像的“社会”的图像加载不走]

来源

2012-09-27 Shade

'img'是一个空标签，不应该有结束标签。也'center'是非常，非常过时 –

这样 – geekman

– geekman

更新的答案，其中一个实际工作修改jQuery脚本以下

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

这从图像

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

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

删除所有造型测试Firefox和铬，如果你想你可以找到一些oth呃方式来表达不透明的古董即版本...

来源

2012-09-27 22:17:08 xception

工作！一切都很好......非常感谢！ – Shade

没问题，只要我在身边 – xception

没有</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-27 21:41:51

我也尝试过......并且仍然是'display：none'主宰它下面的所有东西。 – Shade

我看不到任何隐藏的原因。检查你的CSS！ –

我检查了你的网站代码，我同意Gung Foo。你需要在标签末尾加上斜线（注意style =“display：none;”之后） –

仅仅是一个想法，但我建议你设置宽度和高度为你的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-27 21:46:25 xception

'知名度：隐藏;' –

@MattWhipple也应该工作，我只是喜欢不透明的方式，因为这是jquery会玩的东西:) – xception

我试过'不透明度'技巧，它确实修复了我的社交按钮，但现在标识图像确实加载...所以我将它返回到'display：none' – Shade

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

来源

2012-09-27 21:47:26

JQuery淡入延迟

回答

相关问题