ドロップダウンメニューのmouseleaveで遅延を追加します

Question

私はOpencart（1.5.5.1）とJournalテーマの古いバージョンを使用しています。

ドロップダウンメニューは、マウスを離したときにすぐに消えます。これは実際デスクトップ上の問題ではありませんが、タッチスクリーンデバイスでは問題を引き起こします。私はすぐにフェードアウトする前に数秒待つ必要があります。

この件に関するいくつかの類似の記事を読みましたが、解決策を自分のコードに適用するのが少し難しいと思います。私はmouseleaveが同じ方法で（おそらくない）タッチ画面に適用されるかどうかはわかりません。

誰でもデスクトップとモバイルの両方で機能する遅延を追加することで助けてください。ここで

はコードです：あなたは

setTimeout 機能を使用することができます

$('#cart > .heading a').die('click'); 
$('#cart').die('mouseleave').die('mouseover').die('mouseleave').die('click'); 
$('#cart').live('mouseover', function() { 
    if (!$("#cart").hasClass('active')) { 
     if (!Journal.isOC2) { 
      $('#cart').load('index.php?route=module/cart #cart > *'); 
     } 
     $('#cart').addClass('active'); 
     $('#cart').live('mouseleave', function() { 
      $(this).removeClass('active'); 
     }); 
    } 
}); 

Answer 1

あなたも、それはjQueryのフェードアウト（）関数を用いて、第1フェードアウト作ることができます。

$(this).fadeOut(2000); 
setTimeout(function(){ 
    $(this).removeClass('active'); 
}, 2000); 

Answer 2

jQuery delay()の機能を使用できます。

「あなたはjQueryの機能を使用している場合にのみ、」しかし、あなたはそれが動作しませんremoveClass()機能を使って、クラスを削除するつもりなら。いくつかのアクションを遅らせるために、CSSでこれを行うことができます。

私はtransition-delayを使用します。私はこれが正確に、または少なくともあなたの目標に近づくことを望みます。ご返信用:)

`

$('#test').hover(function(){ 
 
    $('#dropdown').addClass('active'); 
 
}, function(){ 
 
    $('#dropdown').removeClass('active'); 
 
});

/* Change transition-delay 2s(2 seconds) to how long do you want to delay it. */ 
 
#dropdown.active{ 
 
    opacity: 1 !important; 
 
    -webkit-transition-property: opacity; /* Safari */ 
 
    -webkit-transition-delay: 0s; /* Safari */ 
 
    transition-property: opacity; 
 
    transition-delay: 0s; 
 
} 
 

 
#dropdown{ 
 
    opacity: 0; 
 
    -webkit-transition-property: opacity; /* Safari */ 
 
    -webkit-transition-delay: 2s; /* Safari */ 
 
    transition-property: opacity; 
 
    transition-delay: 2s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="test"> 
 
    HOVER ME PLEASE! 
 
</div> 
 

 
<div id="dropdown"> 
 
    EXAMPLE DROPDOWN 
 
</div>

`