Search code examples
javascriptjqueryhtmlcssnavigation

Animate nav bar in jQuery to move <li> into neighbouring div

http://jsfiddle.net/ejbk4xq7/3/

What I'm attempting to do is to animate navigation <li>s , and have it poke out over the edge of the <div class="sidebar"> on mouseover. I'm using the .animate() function as shown in the jsfiddle and below:

$(document).ready(function(){
    $('li').mouseover(
        function(){
            $(this).animate({ right: '10px' }, 'fast');
        },
        function(){
            $(this).animate({ left: '10px' }, 'fast');
        }
    );
})
Solution

  • Do you mean something like this?

    I added the 

    position:relative

    and

    display:block

    properties of your li elements. And changed your hover-function that the position is reseted on mouseleave.