动画显示jQuery中的导航栏以移动<李>进入相邻分区

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

本文关键字：gt 分区 显示 lt 导航 动画 移动 jQuery      更新时间：2023-09-26

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

我试图做的是制作导航<li>的动画，并在鼠标悬停时将其伸出<div class="sidebar">的边缘。我正在使用如jsfiddle和下面所示的.animate()函数：

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

你的意思是这样的吗？

我添加了

position:relative

和

display:block

li元素的属性。并更改了悬停功能，即在鼠标离开时重新设定位置。

将css中的li位置更改为相对位置，如果是静态，则无法移动元素位置

 ul a li {
   background-image: url(http://i.imgur.com/7OQuO25.png);
   z-index: 13;
   padding-right: 22px;
   padding-bottom: 7px;
   padding-left: 12px;
   padding-top: 2px;
   margin-top: 3px;
   position:relative; /***set the position relative**/
}

以下是的一个工作示例

注：

你的标记无效，你应该像这个一样更改菜单

<ul>
 <li><a href="#">element</a></li>
</ul>
相关文章：