fadeIn not working

JavaScript
1

I want a background change on click. This is what I have.

<script type="text/javascript">
$(document).ready(function(){ 
    $("li.one").click( function(){ 
        $("body").removeClass('bg2 , bg3').addClass("bg1").fadeIn('slow');
	});

    $("li.two").click( function(){ 
        $("body").removeClass("bg1 , bg3").addClass("bg2").fadeIn('slow');
	});

    $("li.three").click( function(){
        $("body").removeClass("bg1 , bg2").addClass("bg3").fadeIn('slow');
	}); 

});
</script>

the change works fine but it is not fading in. What am I doing wrong?

Thank you in advance

2

  1. Then they can’t be faded in. You can only use fadeIn with things that initially have their display property set to “none”.

  2. You will need a separate clone for each of the LI items. It should be identical to the LI element being cloned, but absolutely positioned on top of it (or below). The clone should initially have display:none and the background you want to appear. You apply fadeIn while you apply fadeOut to the original LI item.

3

  1. No they are not hidden.

  2. So I need 3 seperate containers width: 100%; height: 100%; and each with a different background?

4

You can only fade things in if they are hidden to start with. Are they?

If you’re trying to cross-fade the two backgrounds, you’re going to need separate HTML elements for each background, lay one over the other and then fade out out as you fade the other in.