Question

我有一个装载程序在页面完全加载时淡入并淡出。在此过渡期间，如何使图像淡入然后淡出？因此，我正在寻找淡出淡出的图像，然后预加载器淡出。

所以转换就像

一样

预加载器背景＆gt;图像淡入＆gt;图像淡出＆gt;预加载器背景淡出

与装载机here类似的效果。

如果这很简单，我道歉。目前预加载器和图像使用

同时淡入

<div class="loader-container">
    <img src="image.png" alt="Image">
</div>

<script type="text/javascript">// <![CDATA[
    jQuery(window).load(function() {
        jQuery(".loader-container").delay(500).fadeOut("1000");
    });
// ]]>
</script>

Answer 1

使用jQuery动画的回调：

jQuery(function(){
    jQuery("#loader-image").fadeIn(500, function(){
        jQuery("#loader-image").delay(500).fadeOut(1000, function(){
            jQuery(".loader-container").fadeOut(2000);
        });
    });
});

小提琴：http://jsfiddle.net/2kUSw/

使用预加载器淡入淡出图像

1 个答案: