Question

There are similar threads on stack but I didn’t find any suitable for me.

I have body background which I want to change after a click.

$('#start').click(function(){
    $(this).fadeOut('slow');
    $('#help').fadeOut('slow');
    $('#exit').fadeOut('slow');

    setTimeout(function(){
             $('body').css('background-image','url(media/note.jpg)');
    },500);
});

So, I want the new background to fadeIn. I’ve tried adding it in every way possible which I could thought of but without luck.

Is there a way to do so?

Answer 1

You could use jQuery UI library to add a class with a delay, like this:

$(document).ready(function() {
    $("#start").click(function () {
        $(this).fadeOut('slow');
        $('#help').fadeOut('slow');
        $('#exit').fadeOut('slow');
        $('body').addClass("note", 1000);
    });
});

​
where the class “note” would look like:

​.note{
    background-image:url('media/note.jpg');
    /*more styling if you like */
}​

To use jQuery UI library, make sure to add the following scripts to your html HEAD tag:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>

Check out this jsFiddle for an example: CLICK!