jQuery slide/fade functions

Question

I'm trying to modify this snippet:

$(document).ready(function(){
$('.showscript').show();
    $("div.content:not(.about)").hide();

    $(".subnav a, .mainnav a").click(function(){
            //remove possible hilights
            $(".subnav a, .mainnav a").removeClass("active");

            var href = $(this).attr("href");

            //hilight the clicked link
            $('a[href="'+href+'"]').addClass("active");

            //hide possible shown content
            $(".content").hide();

            //show my content
            $("div.content:has(a[name='" + href.replace("#","") + "'])").show();
    });
});

So that when a link in the .subnav or .mainnav is clicked it animates the swap it's doing. I'd like to use jQuery's fadeIn/Out, but I'm not really sure how I could apply it to this? The script is very specific to allow the content to show from either the mainnav and subnav and change active class on both when either is clicked.

You can see what I mean here: http://banderdash.net/design

But it feels much to choppy.

In addition to quickly fading out the content and quickly fading in the new content, I would like the window to slide down to the content space. I'm just using anchors like this:

<a name="work">

and then calling like this:

<a href="#work">

Which jumps the window down as far as it can, but because the content in the black isn't always enough to make a Y plane that would allow the white space on the top to be moved out of the viewable rang. So I think a slide would work much better? Not sure how I can tell it to slide down the value of the href on click?

Would really LOVE any advice/help.

Answer 1

first of all i wouldnt used named anchors. I could make those ids on divs that are children of content. That way you dont have to do any real selction on complex expresstions just a search on id for the div within content. Secondly this allows you to animate each div indivdually. ehich i think is goign to give you the most control. Lastly you need to return false, from your click handler otherwise its goign to do the normal "jump to" type functionality. My script might look something like this:

Content:

 <div class="content">
    <div id="about"> ... </div>
    <div id="work"> ... </div>
    <div id="education"> ... </div>
  </div>

Relevant part of your onready:

$(document).ready(function(){
   $(.subnav a, .mainnav a).click(function(){
       $(".subnav a, .mainnav a").removeClass("active");
       var selector = $(this).attr('href');

       $('a[href="'+selector+'"]').addClass("active");

       if($(selector, '.content').length > 0){
         $('> :visible', '.content').slideUp('fast', function(){
           $(this).fadeOut('fast', function(){
              $(selector, '.content').fadeIn('fast', function(){
                  $(this).slideDown('fast');
              });
           });
         });
       }
       return false;
   });
});

Note that is only pseudo code so a simpel c&p may or may not work. but it should give you an idea.