jQueryジャークの問題（タブ上で連続ホバーあり）

jQueryタブの問題に直面しています。しかし、slideUp()とslideDown()のエフェクトは正常に機能していますが、ユーザーがタブ間をホバーすると、赤色の部分が開いて赤い小さな部分でジャークしようとします。この問題を修正するか、セクションを完全に開いたり閉じたりするにはどうしたらいいですか？jQueryジャークの問題（タブ上で連続ホバーあり）

JS FIDDLE DEMO

出典

2017-08-22 Sanchit Gupta

クリックしたときにトリガーするのは良い考えですか？あるいは何らかの制約がありますか？ – usrNotFound

スライドアップアニメーションをスライドダウンする必要がありますか？または他のアニメーション効果は大丈夫ですか？ –

ありがとう@usrNotFound！私はclickイベントを使用するとうまくいきます。しかし、私はホバー効果でそれを行う必要があります。 –

はあなたのコードを取っ：

jQuery(document).ready(function() { 
     jQuery('.etabs li,.tab_content .etabs_item').mouseenter(function(){ 
      var _tabid = jQuery(this).data('tab'); 

      if(jQuery(this).hasClass('no-drop')){ 
      return false; 
      } 

      jQuery('.tab_content .etabs_item').stop(true, true).slideUp(); 
      jQuery("[data-id='"+_tabid+"']").stop(true, true).slideDown(function() { $(this).addClass('no-drop') }); 
     }); 

     $('.tab_content').mouseleave(function(){ 
       jQuery('.tab_content .etabs_item').stop(true, true).slideUp(function() { $(this).removeClass('no-drop') });  
     }); 
    });

https://jsfiddle.net/nh0p67tL/3/

は、あなたの「ノードロップ」クラスを追加したり削除し、ダウンスライドの最後に機能を追加し、イベントをスライドさせ。

出典

2017-08-22 08:18:24 Stavm

ありがとうStavm！フォールバッククラス 'ノードロップ'、つまり 'return false; 'を追加しました。しかし、今度は、タブから「NO EFFECT」タブまたは「mouseleave」にカーソルを移動するとslideUpする必要があります。 –

jQueryジャークの問題（タブ上で連続ホバーあり）

答えて

関連する問題