JQuery Animate marginTop
===

I am trying out JQuery for the first time.

I decided to create an animated menu and I am having a problem using marginTop (and paddingTop). I am trying to achieve a "wave" type effect for my menu items when the page loads.  When the user hovers over the items, I want them to raise slightly.

I can get the menu to animate using marginLeft and paddingLeft, but it's not the effect I'm looking for and I'm really curious to know what I'm doing wrong.

Here is the markup for the menu:

    <div id="menucontainer">
      <ul id="menu">
        <li class="menu-element">
          <a href="/">Home</a> 
          <span style="color: White; font-size: 2em;">|</span>
        </li>
        <li class="menu-element">
          <a href="/Home/About">About</a> 
          <span style="color: White; font-size: 2em;">| </span>
        </li>
        <li class="menu-element">
          <a href="/Artists">Artists</a> 
          <span style="color: White; font-size: 2em;">|</span>
        </li>
        <li class="menu-element">
          <a href="/Releases">Releases</a> 
        </li>
      </ul>
    </div>

Here's my CSS code for the menu (it goes on a black background)

    ul#menu
    {
        padding: 0;
        margin: 0;
        font-family: "Lucida Console" , Monaco, monospace;
    }
    
    ul#menu li.menu-element
    {
        display: inline;
        list-style: none;
    }
    
    ul#menu li#greeting
    {
        padding: 10px 20px;
        text-decoration: none;
        line-height: 2.8em;
        color: #5C87B2;
        font-family: "Lucida Console" , Monaco, monospace;
    }
    
    ul#menu li.menu-element a
    {
        padding: 10px 20px;
        font-family: "Lucida Console" , Monaco, monospace;
        text-decoration: none;
        line-height: 2.8em;
        color: #5C87B2;
        font-size: 2em;
    }
    
    ul#menu li.menu-element a:hover
    {
        color: #fff;
        text-decoration: none;
    }
    
    ul#menu li.menu-element a:active
    {
        color: #b5d6f9;
        text-decoration: none;
    }
    
    ul#menu li.selected a
    {
        background-color: #fff;
        color: #000;
    }

Here is my working JavaScript:

    $(document).ready(function () {
        menuWave("#menu", 25, 15, 150, .8);
    });
    
    function menuWave(menu_id, pad_down, pad_up, time, multiplier) {
         var list_elements = menu_id + " li.menu-element";
        var link_elements = list_elements + " a";
    
        var timer = 0;
       
        $(list_elements).each(function (i) {
            timer = (timer * multiplier + time);
            $(this).animate({ marginLeft: "0px" }, timer);
            $(this).animate({ marginLeft: "15px" }, timer);
            $(this).animate({ marginLeft: "0px" }, timer);
        });
    
    
        $(link_elements).each(function (i) {
            $(this).hover(
        function () {
            $(this).animate({ paddingLeft: pad_down }, 150);
        },
        function () {
            $(this).animate({ paddingLeft: pad_up }, 150);
        });
        });
    
    }

The marginLeft and paddingLeft animations work fine.

But if I switch marginLeft to marginTop and paddingLeft to paddingTop it doesn't work.



Thanks for your help

-Frinny
