加载时的 jQuery 背景推子答案

【问题标题】：jQuery Background Fader on Load加载时的 jQuery 背景推子
【发布时间】：2012-11-02 17:57:09
【问题描述】：

我希望当人们访问我的网站时，我希望背景为白色，并且当页面完全加载时，5 秒后开始淡入背景中的图片，然后每 15 秒后淡入新图片。您是否知道这样做的好方法，或者是否已经有一些预制插件等。

谢谢，

马丁

【问题讨论】：

标签： jquery

【解决方案1】：

将document.ready与setTimeout结合使用？

您将在 document.ready 函数中使用不同的计时器调用两个 setTimeout 函数。每一个都将fadeIn 图像通过更改css 使用：

$('body').css('background-image', 'YOURIMAGESRC');

【讨论】：

但是如何更改body标签中的CSS？
@MartijnR：更新了答案，希望对您有所帮助。我会把它全部写出来，但是我不想看到你的一些代码。如果您需要更多帮助，请告诉我。谢谢

【解决方案2】：

加载 5 秒后，在 img 标签的 id 上使用 fadeIn()。每 15 秒运行一次计数器。

  <img id="book" src="book.png" alt="" width="100" height="123" />

元素最初是隐藏的，我们可以慢慢显示它：

   $(window).load(function () {
      $('#book').fadeIn(15000, function() {
        // Animation complete
      });
    });

【讨论】：

【解决方案3】：

颜色过渡效果需要使用外部插件。

Here is jsFiddle to inspect.

$(document).ready(function() {

    function repeat() {
        $('body')
            .delay(5000).animate({'background-color':'#fff'},1000)
            .delay(5000).animate({'background-color':'#000'},1000);
    }
    window.setInterval(repeat, 10000);

});

颜色过渡效果来源： Special color transition effect with pure jQuery animation // no ui or other libary

【讨论】：

这是我想要的，但是否也可以不回到原来的背景颜色，而不是使用颜色，使用图片？
$(document).ready(function() { setTimout(function() { $('body').css("background-image","url('../img/background /1.jpg')").fadeIn(1000) },5000) function repeat() { $('body') .delay(5000).css("background-image","url('../img /background/2.jpg')").fadeIn(1000) .delay(5000).css("背景图片","url('../img/background/3.jpg')").fadeIn( 1000) .delay(5000).css("background-image","url('../img/background/1.jpg')").fadeIn(1000) } window.setInterval(repeat, 18000); } );
@MartijnR 你不能像这样为背景图像设置动画。像这样划分对象 3：jsfiddle.net/9DjML/14，您将能够使用淡入淡出效果。