jqueryが最初のプラグインを行った - あまりにも速くなったときにfadeIn/fadeOutの問題

Question

私は自分の小さなツールチップを作ったが、速すぎると問題があるようだ。

これは簡単なツールチップです。つまり、マウスを使って、いくつかのテキストが上に表示されたバブルを表示します。バブルfadeOutを押してください。

いくつかの要素で非常に高速にmouseenter/mouseleaveを実行すると問題が発生します。まず、0.6のようにフェードアウトし始め、最終的には表示されません。

私はそれがキューイングとは何かを推測しています。だから私はstop（）とclearqueue（）を試しましたが、それでも動作しません。

$('#' + settings.popupId).hide().stop().clearQueue().hide(); 

（それは少し厄介な原因私がしようとしていたSA：あなたはおそらくわかりますように、私はこの行は、私は固定する必要が一つだと思い

(function ($) { 


    $.fn.tooltip = function (options) { 

     var selector = $(this).selector; 
     var defaults = { 
      fadeInSpeed:350, 
      fadeOutSpeed:200, 
      delayIn: 350, 
      delayOut: 300, 
      popupId:'tooltip_popup', 
      verticalOffset: 30 
     }; 
     var settings = $.extend({}, defaults, options); 

     $(document).delegate(selector, 'mouseenter', function (e) { 
      var $this = $(this); 
      var title = $this.attr('title'); 
      $this.attr('title', ''); 


      if (title !== '') { 
       if ($('#' + settings.popupId).text() === '') { 
        $('<div />').attr('id', settings.popupId) 
         .appendTo('body') 
         .css({ 
          position:'absolute', 
          backgroudColor: 'black', 
          zIndex: 5 
         }) 
         .addClass('tooltip_style') 
         .hide(); 
        $('<div />').appendTo('#' + settings.popupId).addClass('tooltip_arrow'); 
        $('<span />').appendTo('#' + settings.popupId); 
       } else { 
        $('#' + settings.popupId).hide().stop().clearQueue().hide(); 
       } 

       var ele_x = $this.offset().left; 
       var ele_y = $this.offset().top; 

       $('#' + settings.popupId+' span').text(title); 

       $('#' + settings.popupId) 
        .css({ 
         top : ele_y - settings.verticalOffset, 
         left: ele_x 
        }) 
        .delay(settings.delayIn) 
        .fadeIn(settings.fadeInSpeed); 
      } 

     }); 

     $(document).delegate(selector, 'mouseleave', function (e) { 
      var $this = $(this); 

      $('#' + settings.popupId) 
       .delay(settings.delayOut) 
       .fadeOut(settings.fadeOutSpeed); 
      $this.attr('title', $('#' + settings.popupId+' span').text()); 

     }); 

     return this; 
    } 


})(jQuery); 

：ここ

はプラグインですすべて...ハ）。

私はこのキューイングの事をよく理解していないと思います。任意の助けhttp://jsfiddle.net/denislexic/7YMcu/2/

ありがとう：ここ

はフィドルです。

Answer 1

stop()の代わりにstop(true, true)を試してみてください。 jQueryのドキュメントから

：

.stop([clearQueue] [, jumpToEnd])

clearQueueブール同様にキューに入れられたアニメーションを削除するかどうかを示します。デフォルトはfalseです。

jumpToEnd現在のアニメーションを直ちに完了するかどうかを示すブール値。デフォルトはfalseです。

clearQueueをtrueに設定すると、clearQueue（）コールを取り出すこともできます。

説明

あなたが問題を抱えている理由は、あなたがアニメーションを停止したとき、あなたは次のアニメーションが「通常」の状態であると考え、半移行状態で要素を残していることです。半分目に見える要素をfadeOutに伝えると、後でfadeInに指示されたときに50％の可視状態が保存されます。 stop〜jumpToEndと指定すると、0％または100％の視認性で常に終了します。

clearQueueに関しては、私はそれが真実である必要があるとは確信していません。 jumpToEndはここで重要なことです。あなたはclearQueue値で遊んで、あなたの場合に最も効果的なものを見ることができます。