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)] + ')'
                });
            });
        });
    });
});

链接到我的（我们称之为）网站：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

首先，你需要在背景元素中使用默认的css，在你的情况下是不透明度：0。

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

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

3 个答案: