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>

オプションの移動は正常に機能します。（最初の試行）でコードを使用すると、マウスが新しいオプションの上に移動するたびに、赤いマーカーが元の位置に移動してから新しいオプションに移動します。(2 回目の試行) を使用すると、オプションからマウスを移動すると、マウスをオプションの上に戻すまで何も実行されず、元の位置に移動してから新しいオプションに移動します。私も試しました：

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 に答える