Question

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

我不知道如何设置从右到左的宽度动画以及如何检查鼠标离开的哪一侧。

atm我得到了以下代码：

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>

jQuery UI:

您可以使用支持幻灯片中路线的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

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

然后你只需要更改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

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

1 个答案: