Animated content navigation effect using jquery

• Thursday, May 8, 2008, 6:58
• css, javascript, jquery, tutorial
• 25 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

25 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
• 
  michaelmesh wrote on 14 July, 2009, 21:05

  Hey Roshan, great work. Just wondering if you knew how to adjust the script to use the bottom edge as the anchor, rather than the top (so that the elements resize up rather than down).

  Great component, thanks.
  michaelmesh
• 
  Ryan wrote on 4 October, 2009, 12:40

  To be fair this script needs a major update, didnt look at your code much tbh since this isnt exactly difficult to pull of but there is one major bug i noticed in your demo. On fast connections the ajax runs so fast that the animation is reduced to a mere flicker at the bottom of the sliding box – which in turn makes it very annoying for navigation to be honest.

  Sorry if it sounds harsh, just thought you should know.

  Ryan
• 
  Michael wrote on 7 November, 2009, 11:44

  Very interesting article. But it is also important for your link building to look natural and not an attempt to deceive search engine spiders in search of links. Another way is trying and looking for sites within your industry rather than general, unrelated sites to get links from. So far has been working fine for our business.
• 
  alex wrote on 6 January, 2010, 12:40

  Hello Roshan,

  Thnx for sharing. Now, I tried to modified this a bit and make it somehow dynamic (I also get bored with static content ). So, I built the structure of the divs and links with PHP out of a dbase. My problem is that if you click any element, it will fade out the first one but I cannot make it fade in the selected one…
  Any suggestions?

  Cheers!
• 
  Sudeep Shrestha wrote on 2 February, 2010, 3:44

  Very interesting article. Thanks alot . Gives a great looks and nice effect on the site. Hope to see newer post.

Trackbacks

1. Block Shuffle effect using jquery
2. Block Shuffling effect using jquery
3. pligg.com

Write a Comment