動畫菜單停止每個元素和延遲

Question

我想創建一個菜單，並在mouseenter上水平滑動的背景。但是，當我嘗試將鼠標從第一個移動到第四個時，背景會停在第二個和第三個之間。延遲也是一個問題。這裏是我的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鏈接太：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(); 
});