Почему jQuery запускает наведение мыши на элемент, когда мышь уходит? - PullRequest
Новая
       1

Почему jQuery запускает наведение мыши на элемент, когда мышь уходит?

0 голосов
/ 05 ноября 2010

Пример страницы: http://workshop.grdev.co.nz/mousetime

Есть пять делений, которые должны реагировать на наведение мыши.

Переключатель (hoverDemo.doAnim) устанавливается в значение false при запуске анимации развертывания. Это предназначено для предотвращения многократного срабатывания анимации, когда мышь находится так, что анимация чередуется с расширением двух смежных делений. Занимательно, но не то, что мы хотим. 

hoverDemo = {

  doAnim: true,
  animDelay: 250,
  marginBottom: 20,
  marginTop: 50, // provides space for h2
  heightContracted: 100,

  init: function() {
    $('.outer .inner').each( hoverDemo.contractDiv );
    $('.outer .inner').mouseover( hoverDemo.expandDiv );    
  },

  expandDiv: function() {
    $('#debug-last').html(this.id);   
    if ( hoverDemo.doAnim ) {
      hoverDemo.doAnim = false ;
      $('#debug-ignore').html('IGNORING MOUSE');
      $('.outer .inner').removeClass('expanded');
      $(this).addClass('expanded');
      var those = $('.outer .inner').not('.expanded');
      $(this).animate( { height: $(this).find('p').height()+hoverDemo.marginBottom+hoverDemo.marginTop }, hoverDemo.animDelay, function() {
        hoverDemo.doAnim = true ;
        $('#debug-ignore').html('');
        those.each( hoverDemo.contractDiv );
      } );
    }
  },

  contractDiv: function() {
    $(this).animate( { height: hoverDemo.heightContracted }, hoverDemo.animDelay );
  }
} ;
$(document).ready(hoverDemo.init);

Когда мышь перемещается из Lorem в Praesent, JS-функция hoverDemo.expandDiv запускается, когда мышь оставляет Lorem div.inner ... и я не уверен, почему это происходит.

Вы можете наблюдать это, перемещая мышь в Lorem, ожидая, пока сообщение IGNORING MOUSE не исчезнет, ​​затем медленно перемещая его вниз из расширенного div Lorem.

Если вы перемещаете мышь в стороны, она не выполняет ту же функцию - только при движении вниз.

Если вы перемещаете мышь вниз от одного деления к другому, часто второе деление не расширяется. В зависимости от скорости мыши и времени анимации вы можете увидеть, как расширяются все остальные элементы и т. Д.

Вопросы:

Как насчет этого кода вызывает событие mouseover, когда мышь просто покидает расширенный div, и почему это происходит только тогда, когда мышь уходит через нижний край?

Каков наилучший способ увеличить размер текущего зависшего блока, не допуская при этом отказов?

Демо-версия использует jQuery 1.2.6, так как это версия jQuery, которая в настоящее время используется на сайте.

Поведение наблюдается в OSX Chrome, Firefox, Safari.

1 Ответ

0 голосов
/ 05 ноября 2010

Похоже, что решение (или хорошее решение) заключается в использовании плагина hoverIntent.

Добавление этого в значительной степени заставило его вести себя так, как я и надеялся. Это не отвечает на мой вопрос о том, почему, но это решает проблему:)

Плагин: http://cherne.net/brian/resources/jquery.hoverIntent.html

Обновленный код: http://workshop.grdev.co.nz/mouseintent

hoverDemo = {

  doAnim: true,
  animDelay: 250,
  marginBottom: 20,
  marginTop: 50, // provides space for h2
  heightContracted: 100,

  init: function() {
    $('.outer .inner').each( hoverDemo.contractDiv );
    $('.outer .inner').hoverIntent( hoverDemo.expandDiv, hoverDemo.contractDiv );    
  },

  expandDiv: function() {
   $(this).animate( { height: $(this).find('p').height()+hoverDemo.marginBottom+hoverDemo.marginTop }, hoverDemo.animDelay );
  },

  contractDiv: function() {
    $(this).animate( { height: hoverDemo.heightContracted }, hoverDemo.animDelay );
  }
} ;
$(document).ready(hoverDemo.init);
...