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

我已经建立了一个导航栏和它的插件。设计很简单，如下图所示

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

(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>

以及：

以及：

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

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

我只想让红色标记在鼠标经过时在所有选项上平滑过渡，然后在鼠标从导航栏上方移动时返回其原始位置。我还为此创建了一个JSFIDLE。我是JSFIDLE的新手，所以我也不能让它工作

你想要这样吗

演示

将此方法设置为：

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

---

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

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

---

全副武装：

在您提供的演示中，我仍然看到了与本地驱动器上相同的行为。它会移动到选项，但在返回到原始位置时会犹豫。我可以看到，您在小提琴中所做的正是我希望它做的，但为什么相同的代码在我的本地主机上不起作用？当我将光标从导航栏上方移动时，它会移动到原始位置，但当我将光标放回导航栏上方时，红色标记会犹豫是否移动。你能解释一下为什么会这样吗？谢谢我从插件中删除代码并放在文档的开头，效果很好…谢谢。

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

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

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