2011-01-12 15 views
0

こんにちは私は、買い物カゴに何かを追加するたびにユーザーに表示するdivを持っています(ページに5秒間表示されたミニカートですが、消えてしまいます)。jQueryの問題とhoverIntentとshow hide for div

minicart divの表示は、二つのイベントによってトリガされる:

  1. HOVER:ユーザーがコンテナDIVの上に置いたとき(hoverIntentプラグインを使用して)
  2. CLICK:アイテムがカートに追加されると

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ショーを行うことができるか知っていますか?

これは理にかなっています。

答えて

0

私はそれがこの問題を引き起こしているstop()方法だと思う、キューをクリアしてみてください:

// Show/Hide mini cart on hover 
$('#cartWrapper').hoverIntent(function() { 
    $("#cartPreviewWrapper").stop(true,true).slideDown('fast'); 
    }, 
    function() { 
    $("#cartPreviewWrapper").stop(true,true).slideUp('fast'); 
}); 
関連する問題