Question

我的网站上有一个包含图片，文字和链接的div。这是一个旋转木马。

我要做的是在加载所有内容后显示div。我想使用不透明度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。我不能使用display none，因为我的轮播需要显示才能工作

非常感谢你的帮助

Answer 1

在html标记的style属性中将visibility设置为hidden，然后使用：

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


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

$(window).load等待所有图像都加载

或者你可以参考THIS家伙的帖子，在那里他分享一个插件，允许等待特定元素的图像加载

Answer 2

这里的几个选项可以让您在避免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'

加载内容后显示div

2 个答案: