ツールチップがロードされている間にマウスカーソルの横に回転しているアイコン（jQuery）

Question

私はスピンローディングアイコンをマウスカーソルの隣に表示したいというユニークな状況があります。

このアイコンは、ユーザがdivの上にマウスを置くと表示されます。 1300msの遅延後にツールチップが表示されます。ツールチップが表示されている間に回転アイコンが表示され、ツールチップが表示されたら非表示になります。

私はjquery-ui .position extensionを使用してコードを書いて、必要なものを達成しました。しかし、ツールチップが表示され、回転アイコンが消えると、マウスカーソルを動かすと右に戻ります。マウスがdivの外に移動するまで、アイコンが永久に消えてしまいたいです。

例えば

---

： 私はjsfiddle of this scenarioを作成しました。

マウスカーソルをProduct Info Containerの上に置きます。回転アイコンが表示され、1300ms後にツールチップが表示され、回転アイコンが消えます。しかし、もう一度マウスを動かすと、アイコンが戻ってきます。

マウスを動かしたかどうかにかかわらず、ツールチップが表示されたら、回転アイコンを非表示にするにはどうすればよいですか？

jQueryコード私はこれまでのところ以下のとおりです。

jQuery(document).ready(function($) { 
    var delay = 1300; 
    var timeout; 
    $('.product-bottom-info-container').hover(
     function(e) { 
      var that = $(this); 
      timeout = setTimeout(function() { 
       that.find('.product-custom-tooltip-container').css({ 
        display: 'inline-block', 
        position: 'fixed', 
        zIndex: '5000', 
        margin: '10px', 
        whiteSpace: "nowrap" 
       }).position({ 
        my: "right+10 center", 
        at: "center", 
        of: e, 
        collision: "fit flip" 
       }); 

       $('.mouse-spinner').hide(); 
      }, delay); 
     }, 
     function() { 
      clearTimeout(timeout); 
      $(this).find('.product-custom-tooltip-container').hide(); 
      $('.mouse-spinner').hide(); 
     } 
    ).mousemove(function(e) { 
     $('.mouse-spinner').css({ 
      display: 'inline-block', 
      position: 'fixed', 
      zIndex: '5000', 
     }).position({ 
      my: "left+10 top+12", 
      at: "center", 
      of: e, 
      collision: "flip" 
     }); 
    }); 
}); 

ありがとうございます。

Answer 1

スタイルシートのクラスを通してスピナーのCSS静的部分を設定し、ツールチップがアクティブになったときにそれを再定義することができます。または、mousemove関数内のコードの状態として「タイムアウト」をチェックすることも、mousemove関数の実行の条件として追加のクラスを設定することもできます。あなたの問題を解決するための多くのソリューションがあります。