If hover from right then animate right to left and reversed

Question

I found this fancy site: http://www.lapierrequitourne.com/ I like the navigation and would like to use something like that on my website.

I dont know how to animate the width from right to left and how to check on which side the mouse leaves.

atm ive got the following code:

jQuery(document).ready(function() {
    $("#navi li").hover(function(e) {
        if ((e.pageX - this.offsetLeft) < $(this).width() / 2) {
            //left
        } else {
            //right
        }
    }, function(e) {

    });
});

Answer 1

HTML:

<div id="container">
    <div id="navi">
        <ul>
            <li>MENU ITEM</li> <!-- hover element -->
        </ul>
    </div>
    <div id="hv"></div> <!-- slide element -->
</div>

1. jQuery UI:

   You can use jQuery-UI which has support for directions in slide:

   $("#navi li").hover(function (e) {
       if ((e.pageX - this.offsetLeft) < $(this).width() / 2)
           $('#hv').show("slide", {direction: "left"});
       else
           $('#hv').show("slide", {direction: "right"});
   }, function (e) {
       if ((e.pageX - this.offsetLeft) < $(this).width() / 2)
           $('#hv').hide("slide", {direction: "left"});
       else
           $('#hv').hide("slide", {direction: "right"});
   });
   

   jsfiddle DEMO

---

2. CSS Transition:

   CSS:

   #container {
       position: relative;
       overflow: hidden;
       height: 500px;
   }
   #hv {
       position: absolute;
       left: 0;
       top: 100px;
       width: 100%;
       height: 120px;
       margin-left: -100%;
       background-color: green;
       -webkit-transition: all 1s ease-in-out;
       transition: all 1s ease-in-out;
       z-index: 10;
   }
   

   Then you'll only need to change the margin-left in jQuery:

   $("#navi li").hover(function(e){
       if((e.pageX - this.offsetLeft) < $(this).width() / 2)
           $('#hv').css('margin-left', '0px');
       else
           $('#hv').css('margin-left', '0px');
   }, function(e){
       if((e.pageX - this.offsetLeft) < $(this).width() / 2)
           $('#hv').css('margin-left', '-100%');
       else
           $('#hv').css('margin-left', '100%');
   });
   

   jsfiddle DEMO