Animated content navigation effect using jquery

• Thursday, May 8, 2008, 6:58
• css, javascript, jquery, tutorial
• 19 comments

<a href="#home" class="linkclass" >Home</a>
<a href="#about_us" class="linkclass" >About Us</a>
<a href="#service" class="linkclass" >Services</a>
<a href="#contact_us" class="linkclass" >Contact Us</a>

<div class="container">
    <div id="home" class="msg_body"> content goes here </div>
    <div id="about_us" class="msg_body"> content goes here </div>
    <div id="service" class="msg_body"> content goes here </div>
    <div id="contact_us" class="msg_body">  content goes here </div>
</div>

.container
{
   width:312px;
   margin-top:20px;
}
.msg_body
{
  border:1px solid #CCCCCC;
  padding: 5px;
  width: 300px;
  background-color:#F4F4F8;
  text-align:justify;
  position:absolute;
}
.linkclass
{
  font-weight:bold;
  color:#006699;
}

 //hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
  $('.msg_body').fadeOut("slow");
  $($(this).attr("href")).fadeIn("slow");
});

//hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
   $('.msg_body').hide("fast");
   $($(this).attr("href")).show("slow");
});

 //hide the all div except first one
 $('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
   $('.msg_body').slideUp("slow");
   $($(this).attr("href")).slideDown("slow"););
});

• Share
  Delicious Digg Design Float Mixx Reddit StumbleUpon Technorati
• Printable version

Related Posts

» Block Shuffling effect using jquery
» Help me to become the first Blogging Idol
» Flashing Alert Message Box using JQuery
» Blink and bounce effect on image or object using jquery

19 Comments on “Animated content navigation effect using jquery”

• 
  Ice 9 web wrote on 8 May, 2008, 13:19

  very interesting post you have here you must be a very good web programmer ^_^
• 
  Roshan wrote on 8 May, 2008, 15:17

  Thanks for such a great compliment….I’m also another learner….
• 
  hem wrote on 8 May, 2008, 16:31

  Very Interesting scripts magic
• 
  website design wrote on 9 May, 2008, 13:49

  do you know how can chance the href value?
• 
  Roshan wrote on 9 May, 2008, 15:40

  yes I know…let’s suppose “anchor” is the id of the anchor tag then you can change the href value by using

  $(”#anchor”).attr(”href”,”http://roshanbh.com.np”);

  will change the href value to http://roshanbh.com.np
• 
  Ian wrote on 9 May, 2008, 17:58

  Your demos might be improved if you used different chunks of lorem ipsum text between each page. As it is right now, it’s hard to fully appreciate the transition if it is the same text on each page.

  Good work!
• 
  Roshan wrote on 9 May, 2008, 18:29

  Oh right Ian…thanks for the comment….I’ll try to consider these things in the forthcoming posts..
• 
  Al wrote on 11 July, 2008, 17:14

  Roshan,

  I didn’t put the so you were not able to see the code.

  Here it goes again:

  Menu in index.php:

  Content #1
  Content #2

  Content is displaied in content.php.

  In other words, I would like to have a menu in Page 1 (index.php) which links to content on Page 2 (content.php). However, I tried the code just above and it did not work.

  Is there a way to make it happen, or this content navigation is only for same-page linking.

  Thanks,

  Al
• 
  Al wrote on 11 July, 2008, 17:17

  Sorry,

  I am trying to put the code here, but it is not working. Even using . If you wish to delete the first post, that’s fine. Don’t want to pollute the comments.

  Al
• 
  Roshan wrote on 12 July, 2008, 7:06

  @Al- ya man this code doesn’t work for the different pages…
• 
  john wrote on 10 November, 2008, 4:50

  Oh, excellent! Thanks Roshan, this is exactly what I’ve been looking for.
  I created a portfolio site for a friend, and we would love to have it load QUICKLY between images (hello, javascript), but at the same time keep unique URLs for every image for links from blogs (hello, loading…)
  I first saw the # used to show different content on the same page (without scrolling) on Mobile Me’s Gallery page, and realized this was the solution.
  Thanks for sharing!
  John
• 
  redhawk wrote on 7 December, 2008, 8:40

  Cool.
  How do set a different class to a selected item?
• 
  mario wrote on 27 December, 2008, 23:23

  very nice script here really…

  just one question….
  when the content of tab is longer then the height of a window then the script do a “jump”
  is this possible to avoid somehow? i think the problem is there because of a premalinks..
  thx!
• 
  mario wrote on 28 December, 2008, 22:26

  hello again!
  those was not prema but permalinks .-)
  what i wanted it to post a link where this guy (jordan boesch) kindly explains by example…
  link: http://boedesign.com/demos/wiggleslide/

  look at the difference between example no1. and no2. (notice how whole windows ‘jumps’ up when you 4 example scroll a little bit downwards and click any tab on example no2.)

  i notice this to be very common stuff among jquery plugins…its a little bit inconvenient when you wish to use some of them on your web site…

  nevertheless thx for the really nice plugins!
• 
  Niju wrote on 21 January, 2009, 10:51

  I would like to know if this code can be used for diff pages. ie i need to call this script from other pages. Is there any way?

  In between great scripts man…

  you rock…
• 
  José wrote on 19 April, 2009, 16:52

  Hello,
  It is a great script, thanks a lot.
  There is one problem: it do not work with latest jquery, version: jquery-1.3.1
  Any Idea?
  Best regards
  José
• 
  zeeshan wrote on 27 April, 2009, 5:29

  Hi , Its very good example looking nice on site.
  keep going Roshan…

  Really Rocking

Trackbacks

1. Block Shuffle effect using jquery
2. Block Shuffling effect using jquery

Write a Comment