2009-09-28 4 views
0

Я сделал это раньше, но у меня возникают проблемы с получением этого работать ...JQuery - как использовать stopPropagation()

мне нужно следующее JQuery иметь функцию .stopPropagation, поэтому анимация не будет сходить с ума, если пользователь слишком быстро нависнет над тремя элементами!

$(function() { 
      var tabContainers = $('div.subMenu > div'); 
      tabContainers.hide(); 

      $('.mainMenuDiv a').hover(
      function (e) { 
       tabContainers.filter(this.hash).slideDown(); 
       e.stop(); 
      }, 
      function(e){ 
       tabContainers.filter(this.hash).slideUp(); 
       e.stopPropagation(); 
      }); 
    }); 
+0

Я не уверен, почему вы хотите? Вы используете эффект зависания, поэтому общее ожидаемое поведение заключается в том, что если пользователь быстро переводит несколько элементов, то все они оживут. В противном случае, какие критерии вы используете, чтобы решить, какой именно пользователь хочет расширить? (Обычно клик - это предпочтительное взаимодействие с пользователем для расширения и скрытия). – Steerpike

ответ

4

Похоже, вы ищете функции stop, что отменяет все незавершенные анимации.

$('.mainMenuDiv a').hover(
    function (e) { 
     tabContainers.filter(this.hash).stop().slideDown(); 
    }, 
    function(e){ 
     tabContainers.filter(this.hash).stop().slideUp(); 
    } 
); 

или если вы хотите какой-либо в стадии разработки анимации (ы) быть «откат» попробовать:

$('.mainMenuDiv a').hover(
    function (e) { 
     tabContainers.filter(this.hash).stop(true, true).slideDown(); 
    }, 
    function(e){ 
     tabContainers.filter(this.hash).stop(true, true).slideUp(); 
    } 
); 

Отъезд docs для получения дополнительной информации.

+1

+1, второй код (с истинным, истинным) является единственным, который не застревает (как поясняется в моих комментариях в других ответах). –

+0

А, да, хороший вызов с (истинными, истинными) параметрами. Я знал, что что-то забыл. Хорошая работа Марве. – KyleFarris

0
$(function() { 

     var tabContainers = $('div.subMenu > div'); 
     tabContainers.hide(); 

     $('.mainMenuDiv a').hover(function() { 

      tabContainers.filter(this.hash).dequeue().slideDown(); 

     },function() { 

      tabContainers.filter(this.hash).dequeue().slideUp(); 

     }); 

}); 

Надеется, что это помогает. ;) События «пузырятся» от дочернего элемента до всех его родителей, и вы бы event.stopPropragation(); или event.stopImmediatePropagation(). Однако, чтобы остановить анимацию вы dequeue().

+0

Если пользователь многократно и очень быстро набирает элемент над ним, анимация застрянет под IE и FF. Не уверен, что это ошибка, но –

0

Я могу ошибаться, но это может работать:

$(function() { 
    var tabContainers = $('div.subMenu > div'); 
    tabContainers.hide(); 
    $('.mainMenuDiv a').hover(function() { 
     tabContainers.filter(this.hash).stop().slideDown(); 
    },function() { 
     tabContainers.filter(this.hash).stop().slideUp(); 
    }); 
}); 
+0

Если пользователь неоднократно и очень быстро наводил на себя и выходил элемент, анимация будет «застревать» под IE и FF. Не уверен, что это ошибка. –

2

Будьте осторожны при использовании stopPropagation() и stopImmediatePropagation(), как если бы они были то же самое:

метод
  • event.stopPropagation() предотвращает объект события от перемещения к следующему узлу, но только после того, как любые другие прослушиватели событий на текущем узле могут быть выполнены.

  • Метод Event.stopImmediatePropagation() также предотвращает переход объекта события к следующему узлу, но не позволяет другим слушателям событий на текущем узле выполнять.