动画菜单在每个元素和延迟中停止

Question

我想创建一个菜单，背景在鼠标输入时水平滑动。但是，当我尝试将鼠标从第一个移动到第四个时，背景会在第二个和第三个上停止。延迟也是一个问题。这是我的 html 代码：

<div class="menuSecili iconset"></div>
<ul class="iconset fl">
    <li class="secili seciliSg" id="homepage">Homepage</li>
    <li id="corporate">Corporate</li>
    <li id="products">products</li>
    <li id="branches">Branches</li>
    <li id="contact">Contact</li>
</ul>

和 js：

$('ul li').mouseenter(function(){
     $('.menuSecili').animate({'left':$(this).position().left+20},350);
     $('ul li').removeClass('secili');
     $(this).addClass('secili');
});
$('ul').mouseleave(function(){
     $('.menuSecili').animate({'left':$('.seciliSg').position().left+20},350);
     $('ul li').removeClass('secili');
     $('.seciliSg').addClass('secili');            
});

JSFiddle linktoo： http://jsfiddle.net/D2r4E/

Answer 1

它现在可以使用此代码吗？

var site = {
    menuKaydir: function () {
        $('.menuSecili').offset({
            left: $('ul li.secili').offset().left
        });
        $('ul li').mouseenter(function () {
            $('.menuSecili').animate({
                'left': $(this).position().left + 20
            }, 350);
            $('ul li').removeClass('secili');
            $(this).addClass('secili');
        });
        $('ul').mouseleave(function () {
            $('.menuSecili').animate({
                'left': $('.seciliSg').position().left + 20
            }, 350);
            $('ul li').removeClass('secili');
            $('.seciliSg').addClass('secili');
        });
    }
}
$(function () {
    site.menuKaydir();
});