JQuery проблема с hoverIntent и показать скрыть для div - PullRequest
Новая
       18

JQuery проблема с hoverIntent и показать скрыть для div

0 голосов
/ 12 января 2011

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

Отображение Div в мини-картезапускается двумя событиями:

  1. HOVER: когда пользователь наводит курсор на элемент контейнера (с помощью плагина 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, если пользователи переходят и наводят на него курсор при срабатывании номером два?

Надеюсь, что это имеет смысл, и любая помощь очень ценится!

1 Ответ

1 голос
/ 12 января 2011

Я полагаю, что именно метод stop() вызывает эту проблему, попробуйте очистить очередь: 

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