JQuery Animate using marginTop

[Frinavale]

I am finally trying out JQuery!

I decided to create an animated menu and I am having a problem using marginTop (and paddingTop). I can get the menu to do something with 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.

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.


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:

body
{
    background-color:black;
}
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 () {
    slide("#menu", 25, 15, 150, .8);
});
 
function slide(navigation_id, pad_out, pad_in, time, multiplier) {
    // creates the target paths
    var list_elements = navigation_id + " li.menu-element";
    var link_elements = list_elements + " a";
 
    var timer = 0; // initiate timer for the  animation
 
    // creates an animation for all list elements 
    $(list_elements).each(function (i) {
        timer = (timer * multiplier + time); // updates timer
        $(this).animate({ marginLeft: "0px" }, timer);
        $(this).animate({ marginLeft: "15px" }, timer);
        $(this).animate({ marginLeft: "0px" }, timer);
    });
 
    // creates the animation for all link elements         
    $(link_elements).each(function (i) {
        $(this).hover(
    function () {
        $(this).animate({ paddingLeft: pad_out }, 150);
    },
    function () {
        $(this).animate({ paddingLeft: pad_in }, 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

[Frinavale]

I created a jsFiddle account and saved my example.
You'll notice that the wave function does not work, but the waveLeft function does.

Here's the link to my jsFiddle code demonstrating the problem.

[Frinavale]

Well apparently all I had to do was change the style from:

ul#menu li.menu-element
{
    display: inline;
    list-style: none;
}

To

ul#menu li.menu-element
{
    display: block;
    float:left;
    list-style: none;
}

And the animation worked fine.

-Frinny