Change background image of the site for each navigation menu smoothly using jquery

Change background image of the site for each navigation menu smoothly using jquery

I use javascript function for each menu and call that function onClick event. What i face is the image is not changing smoothly, Some times its loading slowly.

Lets consider 2 links each link calls a function for changing the background of the body

This is how i change now

function events(){

    $("body").css('background-image','url(./wp-content/Uploads/img3.jpg)');

}

function projects(){

    $("body").css('background-image','url(./wp-content/Uploads/img2.jpg)');
    return false;
}

  • Projects

  • Events
  • So when i click it must transform like fade out then like flashing