jQuery navigation animation

JavaScript
1

Hi there,

Just getting to grips with jQuery and I’ve hit a bit of a snag.

I want the homepage of the site I’m working on to be 4 large links. When you click on one the others fade out, then the link you have clicked on moves gracefully to the top of the page, at which point the required content fades in.

I’ve got the animation bit working, now I need the content to fade in…

It feels like I need a If… then clause.

Something like.

If (‘a’).clicked is ‘#cv’, then
$(‘#cvcontent’).fadeIn(1000);

Sorry for my dodgy pseudo-code…

Any help would be great. There’s a working example here:

www dot theclassifiedsband dot co dot uk/nick/index dot html

Thanks in advance,
Mike

2 

$("a#cv").click(function() {
  $("#cvcontent").fadeIn(1000);
});

Or, generically


$("a").click(function() {
  var id = $(this).attr("id");
  $(id + "content").fadeIn();
});

So if you click an <a> with id “cv”, it fades in #cvcontent, when you click an <a> with id “aboutme” it fades in #aboutmecontent, etc
:slight_smile:

3

A-hah, nice! And very simple…

I actually managed a work-around, which is like 5 or 6 lines long, using .addClass and .removeClass. It works great, but your little nugget of info will help me streamline everything.

Thanks very much for your help!
:smiley:

4

Welcome to jQuery! :slight_smile: