加载内容后显示div

我在我的网站上有一个div，它包含图像，文本和链接。这是一个旋转木马。加载内容后显示div

我想要做的是在加载所有内容后显示div。我想使用opacity 0 siwtch来设置不透明度1，并且淡入淡出效果。

这里是我的html：

<div id="slideshow"> 

    <div id="carousel"> 

     <li><a href="en/article-1/"><img width="657" height="394" src="wp-content/uploads/41.jpg" class="image_slideshow wp-post-image" alt="4" nopin="nopin" /></a><div class="legende">&nbsp;</div></li> 

     <li><a href="en/article-3/"><img width="657" height="394" src="wp-content/uploads/21.jpg" class="image_slideshow wp-post-image" alt="2" nopin="nopin" /></a><div class="legende">&nbsp;</div></li> 

     <li><a href="en/article-4/"><img width="657" height="394" src="wp-content/uploads/11.jpg" class="image_slideshow wp-post-image" alt="1" nopin="nopin" /></a><div class="legende">&nbsp;</div></li> 

     <li><a href="en/article-5/"><img width="795" height="476" src="wp-content/uploads/6.jpg" class="image_slideshow wp-post-image" alt="6" nopin="nopin" /></a><div class="legende">&nbsp;</div></li> 

    </div> 

    <ul id="carousel-descriptions"> 

     <li class="desc">This is article 1</li> 

     <li class="desc">This is article 3</li> 

     <li class="desc">this is article 4</li> 

     <li class="desc">this is article 5</li> 

    </ul> 

    <div id="carousel-controls"> 


     <span class="control"></span> 


     <span class="control"></span> 


     <span class="control"></span> 


     <span class="control"></span> 


    </div> 

    <div class="prev_slide"> 

     <img src="../../../wp-content/uploads/structure/prev.jpg"> 

    </div> 

    <div class="next_slide"> 

     <img src="../../../wp-content/uploads/structure/next.jpg"> 

    </div> 

</div>

我想这样的事情，但它不工作：

$(document).ready(function() { 
    $('#slideshow').css('opacity','0'); 
     $('#slideshow').load(function() { 
    $(this).css('opacity','1'); 
    }); 
}

有没有做这件事的呢？淡入显示div。我不能使用显示器没有因为我的传送带需要显示工作

非常感谢您的帮助

来源

2014-04-21 mmdwc

设置其visibility到hidden在HTML标记的样式属性，然后使用此：

<div id="slideshow" style="visibility:hidden;"> 


$(window).load(function() { 
    $('#slideshow').css('visibility','visible'); 
}

$(window).load等待，直到所有的图像加载

，或者你可以参考THIS家伙的帖子，在那里，他同样认为异体插件WS等待特定元素的图像加载

来源

2014-04-21 18:44:34 Banana

谢谢@Banana，我知道如何使用window.load函数，但可以用$（＃slideshow）替换$（window）吗？我不想等到整个窗口被加载，但只有#slideshow ...我不知道它是否可行或者如果有办法做到这一点，谢谢 – mmdwc

是的，更新我的答案 – Banana

一对夫妇在这里的选项，让您在褪色，同时避免display:none;：

<div id="slideshow">...</div>

使用不透明度：

$(document).ready(function() { 
    $('#slideshow').css('opacity',0).animate({opacity:1}, 1000); 
});

使用可视性：

$(document).ready(function() {  
    $('#slideshow').css('visibility','visible').hide().fadeIn('slow'); 
});

参考文献： jquery fade element does not show elements styled 'visibility: hidden'

来源

2014-04-21 19:00:56 StvnW

加载内容后显示div

回答

相关问题