SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    jQuery navigation animation

    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
    Last edited by mickyginger; Mar 8, 2010 at 09:53. Reason: Cracked it (..a bit..)

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Code javascript:
    $("a#cv").click(function() {
      $("#cvcontent").fadeIn(1000);
    });

    Or, generically

    Code javascript:
    $("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

  3. #3
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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!
    :D

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by mickyginger View Post
    A-hah, nice! And very simple...
    Welcome to jQuery!


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
  •