Question

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 a link to my jsFiddle code where you can see and play with my code.
You will notice that the “wave” function does not work but the “waveLeft” function does.

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);
    });
    });

}

Here is my Not Working 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);
            });
    });

}

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

Answer 1

try this code in js:

$(link_elements).each(function (i) {
    $(this).hover(
        function () {
            $(this).animate({ 'padding-top': pad_down+'px' }, 150);
        },
        function () {
            $(this).animate({ 'padding-top': pad_up+'px' }, 150);
        }
    );
});

and this code in css:

ul#menu li.menu-element a
{
    ...
display: block;
float: left;
}

try to fix the rest of the style in order to view a good result …