0

我已经为它构建了一个导航栏和一个插件。设计很简单，如下图所示红线在鼠标悬停时移动到选项上

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

(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 的新手，所以我也无法让它工作。我的第一小提琴

4

2 回答 2

1

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

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

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

于 2013-04-16T17:34:21.610 回答
0

你想要这样吗？

演示 http://jsfiddle.net/uxTpZ/1/

像这样设置这个方法：

bar.on('mouseenter', function () {
        slide.animate({
            'left':$(this).position().left + 'px',
                'width': width + 20 + 'px'
        }, 300);
     });
于 2013-04-16T17:31:38.303 回答