Question

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

谢谢，

马亭

Answer 1

将document.ready与setTimeout结合使用？

您将使用不同的计时器调用setTimeout函数中的两个document.ready函数。通过使用：

更改fadeIn，每个图片都会css

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

Answer 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
      });
    });

Answer 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

加载jQuery背景推子

3 个答案: