0

こんにちは、ユーザーがショッピング カートに何かを追加するたびに表示する div があります (ページに 5 秒間表示されてから消えるミニ カートです)。

ミニカートの div 表示は、次の 2 つのイベントによってトリガーされます。

  1. HOVER: ユーザーがコンテナ div にカーソルを合わせたとき (hoverIntent プラグインを使用)
  2. クリック: 商品がカートに追加されたとき

1 のコードは次のとおりです。

// Show / Hide mini cart on hover
$('#cartWrapper').hoverIntent(function () {
   $("#cartPreviewWrapper").stop().slideDown('fast');
   },
   function () {
     $("#cartPreviewWrapper").stop().slideUp('fast');
});

2 のコードは次のとおりです。

// When user clicks the add to cart button
$('#purchase').click(function() {  // div will not show fully at times when this is triggered
    // show the minicart div for 5 seconds, then hide 
    $("#cartPreviewWrapper").show().delay(5000).queue(function(n) {

        // I NEED TO ADD SOME CODE HERE 
        // THAT WILL MAKE THE DIV STAY / SHOW
        // IF USER HOVERS OVER IT 

        $(this).hide(); n();
    });
});

HTML:

<div id="cartPreview">
  <div id="cartPreviewTable">
        // cart content
     </div>
</div>

私が抱えている問題の 1 つは、番号 2 が発生したときに div が正しく表示されないことです。途中で行き詰まり、完全に伸びないことがあります。注: div は、他のすべてのページで hoverIntent に問題なく表示および非表示になります。ユーザーがカートにアイテムを追加するページにいて、2 番が発生したときに、この問題が発生します。

また、ユーザーが2番目にトリガーされたときにdivにカーソルを合わせた場合、divを表示する方法を知っている人はいますか?

これが理にかなっていることを願っており、どんな助けも大歓迎です!

4

1 に答える 1

1

stop()この問題を引き起こして いるのはメソッドだと思います。キューをクリアしてみてください。

// Show / Hide mini cart on hover
$('#cartWrapper').hoverIntent(function () {
   $("#cartPreviewWrapper").stop(true,true).slideDown('fast');
   },
   function () {
     $("#cartPreviewWrapper").stop(true,true).slideUp('fast');
});
于 2011-01-12T09:40:24.267 に答える