如果从右侧悬停，则从右向左动画并反转

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

我找到了这个花哨的网站:http://www.lapierrequitourne.com/我喜欢导航,并希望在我的网站上使用类似的东西。

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:

atm我得到以下代码:

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

    });
});

1 个解决方案

#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:

   你可以使用支持幻灯片方向的jQuery-UI:

   $("#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:

   然后你只需要改变jQuery中的margin-left:

   $("#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