jQuery menu animation

Posted by bomortensen on Stack Overflow See other posts from Stack Overflow or by bomortensen
Published on 2010-06-03T18:15:31Z Indexed on 2010/06/03 19:44 UTC
Read the original article Hit count: 165

Filed under:
|
|
|

Hi Stackoverflow,

I'm building a website where I'm using jQuery to animate a horizontal tabbed menu. What I want to achieve can be seen here:

/ link removed /

If you hover/mouseover the "Link 1" tab, you'll see that a white div is expanding. Each of the tab menu items are a styled li-tag. What I want to do is, that when you hover/mouseover i.e. the "Link 2" tab, the white div contracts and then expands again with content related to "Link 2" instead of "Link 1". Also, the "Link 1" tab should be expanded by default (i.e. when you just entered the site)

Does any of you jQuery ninjas out there know how to do this? What I currently have is this:

<script type="text/javascript">
$(document).ready(function(){
var $div = $('#divtest');
    var height = $div.height();
   $div.hide().css({ height : 0 });

    $('#forside').hover(function () {
        if ($div.is(':visible')) {
             $div.animate({ height: 0 }, { duration: 200, complete: function () {
                 $div.hide();
           } });
        } else {                       
  $div.show().animate({ height : height }, { duration: 200 });
        }

       return false;
    });


  });
</script>

Do I need to have 4 different div's which expands/contracts for every mouseover?

If i'm not being clear about what my problem is, please say so and I'll try to elaborate :)

Thanks in advance!

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery