如何用动画改变div背景图像

时间:2015-03-15 11:27:23

标签: html background jquery-animate

有没有办法在JQuery中用fadeout或动画更改DIV背景?

例如,我想用这段代码改变背景

$('#DIV').css("background", "url(Image1.jpg)")

if (Button1 == true) {
$('#DIV').css("background", "url(Image2.jpg)") }

1 个答案:

答案 0 :(得分:1)

使用此Jquery:

function test() {
    $("#DIV").each(function(index) {
        $(this).hide();
        $(this).delay(2000* index).fadeIn(2000).fadeOut();
    });
}
test();

<强> Live Demo

或试试这个:

<强> Live Demo

$('.imges').fadeTo('slow', 0.3, function()
{
    $(this).css('background-image', 'url(http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg)');
}).delay(1000).fadeTo('slow', 1);

关于你的编辑我认为这是你需要的糖果:

var rotateEvery = 2; //seconds
var images = [
    "http://placehold.it/148x148",
    "http://placehold.it/150x149"];
var curImage = 0;
setInterval(delayFunction, rotateEvery*1000);
function delayFunction() {
  if(curImage == images.length){
    curImage = 0;
  }
  $('#homeback').fadeOut('slow',function(){
    $(this).css("background-image",'url('+images[curImage]+')').fadeIn('slow');
      curImage++;
  });

}

<强> LIVE DEMO