CODEWITHSUNDEEP
htmlbackgroundjquery-animate
MojtabaSh
MojtabaSh

Reputation: 637

how to change div background image with animation

Is there a way to change DIV background with fadeout or animation in JQuery?

For example, I wanna change the background with this code

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

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

Upvotes: 1

Views: 2982

Answers (1)

ZEE
ZEE

Reputation: 5849

use this Jquery : 

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

Live Demo

or try this :

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

regards to your Edit I think this sweets your need : 

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

Upvotes: 1

Related Questions