SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,058
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fadeIn not working

    I want a background change on click. This is what I have.
    Code:
    <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. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,058
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    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.
    1. No they are not hidden.

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

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •