title: JQuery Animate marginTop
body: <p>I am trying out JQuery for the first time.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is a link to my <a href="http://jsfiddle.net/Frinavale/RRrq8/4/" rel="nofollow">jsFiddle code</a> where you can see and play with my code.
  You will notice that the "wave" function does not work but the "waveLeft" function does.</p>
  
  <p>Here is the markup for the menu:</p>
  
  <pre><code>&lt;div id="menucontainer"&gt;
    &lt;ul id="menu"&gt;
      &lt;li class="menu-element"&gt;
        &lt;a href="/"&gt;Home&lt;/a&gt; 
        &lt;span style="color: White; font-size: 2em;"&gt;|&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="menu-element"&gt;
        &lt;a href="/Home/About"&gt;About&lt;/a&gt; 
        &lt;span style="color: White; font-size: 2em;"&gt;| &lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="menu-element"&gt;
        &lt;a href="/Artists"&gt;Artists&lt;/a&gt; 
        &lt;span style="color: White; font-size: 2em;"&gt;|&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class="menu-element"&gt;
        &lt;a href="/Releases"&gt;Releases&lt;/a&gt; 
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my CSS code for the menu (it goes on a black background)</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Here is my working JavaScript:</p>
  
  <pre><code>$(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);
      });
      });
  
  }
  </code></pre>
  
  <p>Here is my Not Working code:</p>
  
  <pre><code>$(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({ marginTop: "0px" }, timer);
          $(this).animate({ marginTop: "-15px" }, timer);
          $(this).animate({ marginTop: "0px" }, timer);
      });
  
  
      $(link_elements).each(function (i) {
          $(this).hover(
              function () {
                  $(this).animate({ paddingTop: pad_down }, 150);
              },
              function () {
                  $(this).animate({ paddingTop: pad_up }, 150);
              });
      });
  
  }
  </code></pre>
  
  <p>The marginLeft and paddingLeft animations work fine.</p>
  
  <p>But if I switch marginLeft to marginTop and paddingLeft to paddingTop it doesn't work.</p>
  
  <p>Thanks for your help</p>
  
  <p>-Frinny</p>