我的背景没有淡入，只是加载

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

您的回调函数按错误的顺序触发。你写的代码说：“淡入h1超过2秒。完成后，淡入正文3秒。完成后，设置正文的背景图像。”

您需要隐藏body并设置背景图像，然后在body中淡入淡出，然后在h1中淡出。代码将类似于：

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

Answer 3

首先，您需要将背景元素的默认css设置为opacity:0。

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