javascript - 悬停时从左侧向内滑动底部边框

Question

我的菜单有这个 CSS:

#menu {
    display:inline;
    float:right;
}
#menu > ul > li {
    display:inline-block;
    margin-right:20px;
    min-width:70px;
}
#menu > li {
    display:inline-block;
    list-style:none;
    margin-left:auto;
    margin-right:auto;
}
#menu > li:hover {
    color:#000000;
}
#menu li a {
    display:block; 
    padding-top:25px;   
    border-top:4px solid #FFFFFF;
    color: #FFFFFF;
    text-decoration:none;
    text-align: center;
}
#menu li a:hover { 
    border-color:#000000; 
    color:#000000;
}

我希望能够在链接悬停时从侧面滑入底部边框(类似于顶部边框但在底部)

这是一个 fiddle : http://jsfiddle.net/2w6NB/

Answer 1

定位你想要从左边出现的元素

left: -200px; //or however much it takes to hide the element completely or partially

下面是一些示例代码，您可以成功地使用它们来为您的功能建模:

$( "#item" ).hover(function() {

        $( "#item" ).stop().animate({
            left: "-1" //shows item
        }, 400);}, function() {


        $( "#item" ).stop().animate({
             left: "-160" //this determines how far back the item goes after hovering 
        }, 400);

});

如果您有任何疑问或它是否有效，请告诉我。