Question

Problem: Only get the first part of the animation. It won’t run the hover animation.
The idea is to have the bottoms move up or down when hovered over.

Working on this site:
http://ripsraps.com/daniel/

Using this script for animating the navigation bar:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

This is the Jquery:

$(document).ready(function()
{
    slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
    var list_elements = navigation_id + " li.sliding-element";
    var link_elements = list_elements + " a";
    var timer = 0;
    $(list_elements).each(function(i)
    {

        $(this).css("margin-top","-180px");
        timer = (timer*multiplier + time);
        $(this).animate({ marginTop: "0" }, timer);
        $(this).animate({ marginTop: "15px" }, timer);
        $(this).animate({ marginTop: "0" }, timer);
    });     
    $(link_elements).each(function(i)
    {
        $(this).hover(
        function()
        {
            $(this).animate({ paddingTop: pad_out }, 150);
        },      
        function()
        {
            $(this).animate({ paddingTop: pad_in }, 150);
        });
    });
}

PS: I don’t know fiddle, and will not give any fiddle links.

Answer 1

Right now your animation is beeing applied as you can see when inspecting the code in the Chrome debugger. It just doesn’t show up cause you do not apply it correctly.

I think you should apply the hover effect to the list_elements instead of the link_elements. I would also use marginTop to animate, not the paddingTop.

PS: fiddle is not that hard, you realy should try it once.