加载内容后显示一个 div

Question

我的网站上有一个 div，其中包含图像、文本和链接。 这是一个轮播。

我想要做的是在加载所有内容后显示 div。我想使用 opacity 0 siwtch 到 opacity 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。 我不能使用显示无，因为我的轮播需要显示才能工作

非常感谢您的帮助

Answer 1

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

Answer 2

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

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


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

$(window).load 等到所有图片都加载完毕

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