如何用动画更改 div 背景图片

Question

有没有办法在 JQuery 中用淡出或动画更改 DIV 背景？

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

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

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

Answer 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

如何用动画更改 div 背景图片

how to change div background image with animation

html

background

jquery-animate