Jquery replacing body background-image with fadeout and fadein effect

Question

I just want to change background-image of body with a fadeOut and replace the second image with fadeIn.
But I get the following error:

Uncaught TypeError: Object url(file:///C:/Users/.../p1bg_cutted.png) has no method 'fadeOut'

 $('body').css("background-image").fadeOut('slow',function(){
    $("body").css("background-image",
    "url(Images/son_componentler/p2bg_cutted.png)").fadeIn('slow')

 });

I can change the image without fadein/fadeout but I guess in that case I am making a sytax mistake.

Answer 1

You code fails because $('body').css("background-image") returns a string -- the value of the CSS background image property; not a jQuery object.

Secondly, your code will fade in/fade out the entire body. Background image itself can not be faded.

I suggest that you use an img positioned behind content and fade it.