2011-01-12 3 views
0

Привет, У меня есть div, который я показываю пользователям каждый раз, когда они добавляют что-то в корзину покупок (это мини-корзина, которая отображается на странице в течение 5 секунд, а затем исчезает).jQuery проблема с hoverIntent и show hide for div

Дисплей minicart ДИВ вызван двумя событиями:

  1. НАВЕДЕНИЕ: Когда пользователь парит над контейнера 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> 

Один вопрос, который я имею что когда номер 2 уволен DIV не отображается правильно. Это как-то застряло на полпути и не распространяется повсюду. Примечание. Div показывает и скрывает без проблем с hoverIntent на всех моих других страницах. Просто, когда я нахожусь на странице, где пользователи добавляют элемент в корзину, а номер 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'); 
});