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

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

(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

===============>>#1 票数:1 已采纳

并添加到其他答案...并使红色标记返回到原始位置:

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

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

===============>>#2 票数:0

你要这样吗

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

像这样设置此方法:

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

  ask by Bryan translate from so

未解决问题?本站智能推荐:

1回复

如何在另一个JavaScript文件中包含插件文件

我使用html(...)和jquery将部分代码发送到HTML页面。 我在用html(...)发送的部分上使用了jquery插件(Tooltipsetrt http://iamceege.github.io/tooltipster/ ?)。 但我的插件在该部分不起作用。 我认为我必须在我的
2回复

jQuery Carousel插件滚动到第一个项目点击

我正在使用这个jQuery插件: http : //www.thomaslanciaux.pro/jquery/jquery_carousel.htm来创建一个垂直的轮播。 我想做一些类似于分页的东西,点击一个按钮并滚动到相应的框架。 但我只想要一个按钮。 此按钮将在最后一帧之后出现,
2回复

jQuery的; 如何在插件中强制元素重绘

我想编写自己的jquery插件以将效果应用于元素。 结果是折叠一个html元素(我确定这些元素已经存在,但我想学习自己编写)。 该函数获取所选元素的宽度并减小其宽度; 例如 var width = $(this).width(); // get width while(w
1回复

我的博客有一个jquery评论插件,但是我不知道评论存储在哪里?

头 身体 真的找不到,甚至评论也没有出现。 我应该做一些服务器端脚本来使其工作吗? 如果是这样,请指导我
1回复

在页面加载时选择jstree插件中的节点

我使用JsTree jQuery插件来在我的网页上创建组织结构。 问题是当页面加载时,HTML的DOM仅由树的根级别组成(由于某种原因,这是此插件的工作方式)。 因此,当我尝试使用“ select_node”功能选择某个节点时,由于它未加载到DOM中,因此无法识别它。 这是假定选择节
1回复

jQuery插件检索函数原型中的id

我得到了以下jquery插件代码,我想检索受插件影响的元素的ID。 请帮助任何想法。 我做了一个小提琴http://jsfiddle.net/bedjoc01/FU8yR/10/ / ************ Début插件*****************************
1回复

如何在Angular 4中使用此jQuery插件?

我正在使用Angular 4(带有TypeScript语言)开发Web应用程序。 我有一个问题,希望它很容易解决。 我想在我的应用程序中使用此jQuery插件( https://harvesthq.github.io/chosen/ )来查看“多项选择”。 问题是我无法将其导入
1回复

在div中调用时,jQuery SlidesJS插件不显示

我正在使用http://slidesjs.com中的SlideJS插件。 在浏览器中打开slideshow.htm页面时,它工作得很好。 但是,当我尝试将此页面加载到主页上的div#main时,就会出现问题。 仅显示幻灯片的外部框架以及左右滚动按钮。 幻灯片放映中的实际幻灯片根本
1回复

哪个jQuery插件可以搜索元素并将其实时显示在DIV中? [关闭]

我正在搜索一个允许我执行以下操作的jQuery插件: 具有将用于用户搜索文本的输入 搜索我的元素 显示适合来自第一个输入的搜索字符串的所有元素。 因此,就像通过元素的搜索系统一样,但是我需要在其他DIV中显示这些元素。 我当前正在使用快速搜索( https:/
1回复

切换JQuery插件

我有一张使用imageLens插件调用缩放效果的图像。 它可以工作,但是每次单击文本时我都想切换插件。 我尝试在许多地方使用.toggle() ,但是它可以切换图像或单击文本,但不能切换插件。 我怎样才能做到这一点。 HTML: 脚本: