javascript - 我的背景不会淡入，只是加载

Question

我有以下 javascript 代码：

$(document).ready(function () {
    $(window).load(function () {

        var images = ['image_1.jpg', 'image_2.jpg', 'image_3.jpg', 'image_4.jpg', 'image_5.jpg'];

        $('h1').fadeIn(2000, function () {
            $('body').fadeIn(3000, function () {
                $('body').css({
                    'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'
                });
            });
        });
    });
});

链接到我的（我们称之为 a）网站：https ://dl.dropboxusercontent.com/u/46415927/index.html

问题是背景不会在文本之后淡入。有谁知道这个的解决方案？

Answer 1

尝试

$('body').hide();

首先，因为你不能淡化已经显示的东西。

所以：

$(document).ready(function () {

    $(window).load(function () {

        var images = ['image_1.jpg', 'image_2.jpg', 'image_3.jpg', 'image_4.jpg', 'image_5.jpg'];

        $('h1').fadeIn(2000, function () {
            $('body').hide().fadeIn(3000, function () {
                $('body').css({
                    'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'
                });
            });
        });
    });
});

Answer 2

您的回调函数以错误的顺序触发。你写的代码说“在 2 秒内淡入 h1。完成后，在 3 秒内淡入身体。完成后，为身体设置背景图像。”

您需要隐藏正文并设置背景图像，然后淡入正文，然后淡入h1. 代码将类似于：

$('body').hide().css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
$('body').fadeIn(3000, function () {
    $('h1').fadeIn(2000);
});

Answer 3

首先，您需要将背景元素（在您的情况下为 body）的默认 css 设置为 opacity:0。

在 body 元素淡入后，您将 background-image css 属性设置为回调函数。您需要先设置该随机背景图像，然后再启动 fadeIn 方法。