使用jQuery在新图像中褪色

Question

下面是充当背景的图像元素。该位置是绝对的，它也具有低z指数，因此它留在其余内容后面。

<img src="day-sky.jpg" id="background" />

下面的SECS仅在一分钟内提及几秒钟。这只是用于测试目的，但是如果秒为＆lt，我想拥有一个背景图像；30和另一个如果较大的话30。

我一直在寻找做这件事的方法，但没有提出一种很好的方法。有任何想法吗？

function changeBackground() {
if (secs > 30) {
    //have one background
}
else {
    //have a different background
  }
}

Answer 1

您可能需要使用 setInterval()函数在按照您的需求定义的每一个时间邮票后更改背景。

setInterval(changebackground, timeout); runs the code/function once after the timeout.

 $(function() {
    setInterval(function() {
        var bg = ["#000","#FF0", "#909"]
        var rep= Math.floor(Math.random() *3);
                $("body").css("background",bg[rep])
    }, 3000)
  })

Answer 2

这是一个工作示例：http：//jsfiddle.net/pkqgk/

var imgs = [
        "http://placehold.it/1920x1080/&text=1",
        "http://placehold.it/1920x1080/&text=2",
        "http://placehold.it/1920x1080/&text=3",
        "http://placehold.it/1920x1080/&text=4",
        "http://placehold.it/1920x1080/&text=5",    
        "http://placehold.it/1920x1080/&text=6"   
    ],
    ind = 0,
    dur = 10 * 1000; // ten seconds
(function imgSlide(){
    var img = ind % 2 ? $('#imageOne') : $('#imageTwo'),
        hid = ind % 2 ? $('#imageTwo') : $('#imageOne');
    console.log(img, hid);
    img.fadeOut("slow", function(){
        hid.fadeIn("slow").css('margin-left', -hid.width()/2);
        if (++ind == imgs.length) ind = 0;
        img.attr('src', imgs[ind]);
        setTimeout(imgSlide, dur);
    });
})();​