0

i have a botton which is for changing the background image with jquery, as the following code shows

$("#button").click(function() { 
  $('#div1').css("background-image", "url(images/newBG.jpg)");
});

it works very fine! but i want to fade in the newbg-image... is it possible to add a jquery fade method to it. Any help would be very appreciated. Thanks Ted

supersize
  • 12,516
  • 15
  • 62
  • 119
  • Check this answer : http://stackoverflow.com/a/5002651/1606729 – koopajah Jan 30 '13 at 19:42
  • Background images don't have an `opactiy` property, so this is not possible. If you really need that fade, you should use an actual `img` element instead. – Joseph Silber Jan 30 '13 at 19:42
  • No it's not possible to fade the background without fading the entire contents of the div. You could instead have a `absolutely` positioned `img` which you can then fade in/out. – Rory McCrossan Jan 30 '13 at 19:42
  • possible duplicate of [jquery: fade css background image change](http://stackoverflow.com/questions/5002351/jquery-fade-css-background-image-change) – j08691 Jan 30 '13 at 19:46

1 Answers1

0

Try this:

$("#button").click(function() { 
  $('#div1').hide().css("background-image", "url(images/newBG.jpg)").fadeIn(500);
});
Barlas Apaydin
  • 7,125
  • 11
  • 54
  • 84