在jQuery中动画导航栏以将<li>移动到邻近的div </li>

Question

谢谢大家。

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

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

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

}）

Answer 1

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

 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**/
}

Here's a working example

注意：

您的标记无效，您应该像这样更改菜单

<ul>
 <li><a href="#">element</a></li>
</ul>

Answer 2

你的意思是this吗？

我添加了

position:relative

和

display:block

li元素的属性。并更改了你的悬停功能，即在mouseleave上重置位置。