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

【问题标题】：Fade in and out image with preloader使用预加载器淡入淡出图像
【发布时间】：2014-06-13 18:24:53
【问题描述】：

我有一个加载器，它在页面完全加载时淡入淡出。在此过渡期间，如何使图像淡入然后淡出？所以我正在寻找图像淡入淡出然后预加载器淡出。

所以转换就像

预加载器背景 > 图像淡入 > 图像淡出 > 预加载器背景淡出

类似加载器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>

【问题讨论】：

标签： jquery

【解决方案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/

【讨论】：