1

ホバー時にツールチップを表示し、マウスリーブでフェードアウトする関数imを作成しようとしています。

$('.tt').mouseover(function(e) { 
    var tip = $(this).find('.tooltip');              
    //Set the X and Y axis of the tooltip
    $('.tooltip').css('top', 0 );
    $('.tooltip').css('right', -200);
    tip.fadeIn('500');
}).mouseout(function(e) {
    var tip = $(this).find('.tooltip');
    tip.fadeOut('500'); 
});

ユーザーがマウスで不安定になり、複数回ホバーすると、基本的にツールチップが点滅します。これを防ぐ方法はありますか？

4

7 に答える 7

4

あなたが探して.stop( [clearQueue ] [, jumpToEnd ] )いる。

tip.stop(true, true).fadeIn(500);
tip.stop(true, true).fadeOut(500);

.stop() あなたはここでもっと知ることができます。

于 2013-02-14T14:43:23.970 に答える
3

stop（）を追加します-http://api.jquery.com/stop/

$('.tt').mouseover(function(e) { 

    var tip = $(this).find('.tooltip');

    //Set the X and Y axis of the tooltip
    $('.tooltip').css('top', 0 );
    $('.tooltip').css('right', -200);
    tip.stop().fadeIn(500);

}).mouseout(function(e) {

    var tip = $(this).find('.tooltip');
    tip.stop().fadeOut(500);

});
于 2013-02-14T14:42:17.857 に答える
2

使用tip.stop().fadeIn()してtip.stop().fadeOut()

于 2013-02-14T14:42:17.123 に答える
1

これは機能する可能性があります。.stop（）を使用してみてください

 tip.stop().fadeOut('500');
于 2013-02-14T14:42:31.660 に答える
0

HoverIntentプラグインを確認することをお勧めします。

これらのジッターの一部を防ぐように設計されています。

また、スロットルとデバウンスに関するベン・アルマンの記事も興味深いものです。

于 2013-02-14T14:43:02.177 に答える
0

LIVE DEMO

確かに、.stop()メソッドを使用してmouseenter mouseleave

$('.tt').on('mouseenter mouseleave', function( e ) { 

    var elOpacity = e.type=='mouseenter' ? 1 : 0 ;
    var $tip = $(this).find('.tooltip');

    $('.tooltip').css({top: 0, right: -200 });
    $tip.stop().fadeTo(500, elOpacity);

});

上記の例のメソッドを使用すると、関心のあるイベント.on()の「リスト」を作成できます。 条件演算子（Ternary）内で、（event）の変更をリッスンし、要素の不透明度の値を割り当ててアニメーションに渡すよりも、方法。アニメーションの蓄積を作成せずに前のアニメーションを終了します。
(?:)e.fadeTo()
.stop()

続きを読む：
http ：//api.jquery.com/stop/
http://api.jquery.com/fadeto/
http://api.jquery.com/on/
http://api.jquery.com/mouseenter /
http://api.jquery.com/mouseleave/
さらに探索： http：
//api.jquery.com/hover/
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/ Conditional_Operator

于 2013-02-14T14:43:36.387 に答える
0

実際のエンター/リーブを試してください-チップが表示されたときに.ttがフォーカスを失う場所にチップがあると、機能しない場合があります。

ストップを追加し、cssをオブジェクトに単純化します。

$('.tt').mousenter(function(e) { 
    var tip = $(this).find('.tooltip');
    //Set the X and Y axis of the tooltip
    tip.css({'top':0,'right': -200});
    tip.stop().fadeIn('500');
}).mouseleave(function(e) {
   $(this).find('.tooltip').stop().fadeOut('500');
});
于 2013-02-14T14:44:37.210 に答える