mouseenter和mouseleave在我的插件中给了我一个奇怪的结果

Question

我为它构建了一个导航栏和插件。设计很简单，如下图

所示

现在，当鼠标经过时，红线会在选项上方移动。当鼠标从整个导航栏上移动时，红色线应返回到原始位置。以下是插件：

(function($){
$.fn.MyNavSlider = function(){
var bar,slide,pos,width,deflt;
bar=$(this);
slide=$('.myslider');
pos=bar.position();
width=bar.width();
deflt=$("#Nav_bar");

bar.on('mouseenter',function(){
slide.animate({'left': pos.left + 'px', 'width': width + 'px'}, 300);
});
//(first attempt)if I use th below code the weird behaviour begins
bar.on('mouseleave',function(){
slide.animate({'left': '0px', 'width':'20px'}, 300);
});
/*(Second attempt)I also tried the following
deflt.on('mouseleave',function(){
//back to original position
});
*/
}
})( jQuery );
$("div.Mylinks").each(function(){
$(this).MyNavSlider();
});

这是html的布局：

<div id="Nav_bar">
<div id="Slider_holder">
<div class="myslider"></div>
</div>

<div id="Nav_bar">
<div class="Mylinks">Option 1</div>
<div class="Mylinks">Option 2</div>
<div class="Mylinks">Option 3</div>
<div class="Mylinks">Option 4</div>
//......etc
</div>
</div>

移动选项工作正常。如果我在（第一次尝试）中使用代码，则每次鼠标移动到新选项时，红色标记移动到原始位置，然后转到新选项。如果我使用（第二次尝试），当我将鼠标从关闭选项上移开时，它会做什么，直到我将鼠标移回选项然后它转到原始位置然后转到我的新选项。我也尝试过：

bar.on('mouseleave',function(){
//my code to execute
});

和：

bar.on({
mouseenter: function(){
//code to execute
},
mouseleave: function(){
//code to execute
}
});

和：

bar.on('hover',function(){
//code to execute
});
deflt.animate({'left':'0px','width':'20px'});

我甚至在函数中添加了一个事件，然后在mouseleave函数中执行了类似的操作：

if(bar.har(e.target).length > 0)
{
//execute reset code
}
//the event was added to $.fn.MyNavSlider = function(event) line

我想要的是红色标记在鼠标经过它时在所有选项上平滑过渡，然后当鼠标从导航栏上移动时返回到原始位置。我也为此创建了一个JsFiddle。我是JsFiddle的新手，所以我也无法让那个人工作。 MyFirstFiddle

Answer 1

并添加到另一个答案...并使红色标记返回原始位置：

$('#Nav_bar').on('mouseleave', function () {
    slide.animate({
        'left': '0px',
            'width': '20px'
    }, 300);
});

完全小提琴：http://jsfiddle.net/NACBK/

Answer 2

你想这样吗？

<强>演示 http://jsfiddle.net/uxTpZ/1/

像这样设置此方法：

bar.on('mouseenter', function () {
        slide.animate({
            'left':$(this).position().left + 'px',
                'width': width + 20 + 'px'
        }, 300);
     });