Замена MouseOver на .hoverIntent - PullRequest
Новая
       11

Замена MouseOver на .hoverIntent

5 голосов
/ 10 февраля 2010

Прежде всего, я прошу прощения ... Я уже писал этот вопрос, но я плохо его объяснил. У меня проблемы с подключением hoverIntent к следующему JavaScript ... Мне нужно, чтобы заменить функции mouseenter и mouseleave ниже. Просто чтобы прояснить, я прошу помощи, потому что я не очень хорош с синтаксисом JavaScript. Второй фрагмент кода, приведенный ниже, выглядит так, как будто он должен работать, но он ничего не делает и кажется полностью мертвым в Internet Explorer. 

if (jQuery.browser.msie === true) {
  jQuery('#top_mailing')
    .bind("mouseenter",function(){
      $("#top_mailing_hidden").stop().slideDown('slow');
    })
    .bind("mouseleave",function(){
      $("#top_mailing_hidden").stop().slideUp('slow');
    });
}

Я использую следующее для других браузеров, но оно не работает в Internet Explorer. 

$('#top_mailing').hoverIntent(
  function () {
    $("#top_mailing_hidden").stop().slideDown('slow');
  }, 
  function () {
    $("#top_mailing_hidden").stop().slideUp('slow');
  }
);

1 Ответ

3 голосов
/ 11 февраля 2010

Я думаю, что нашел проблему.

Вы звоните $('#top_mailing').hoverIntent(... дважды. Один раз внизу файла hoverintent_r5.js и один раз в файле custom.js. Судя по всему, IE это не нравится. Избавьтесь от одного или другого, и все должно быть в порядке.

Вероятно, лучше хранить весь код в вашем собственном js-файле. Иначе об этом легко забыть.

РЕДАКТИРОВАТЬ: Как избежать проблемы остановки ().

Я предпочитаю animate: 

$('#top_mailing').hoverIntent(
  function () {
    $("#top_mailing_hidden").stop().animate({height:150},'slow');
  }, 
  function () {
    $("#top_mailing_hidden").stop().animate({height:0},'slow');
  }
);

Таким образом, когда вам нужно остановиться и изменить направление, он всегда будет знать, куда идти. (0 и 150 в примере выше.)

Обратите внимание, что для этого потребуется, чтобы top_mailing_hidden установил clip:auto; overflow:hidden.

Так как вы используете hoverIntent, может быть, что вызовы stop () могут не понадобиться, поскольку hoverIntent предназначен для избежания этих непреднамеренных событий при наведении курсора.

Немного не по теме:

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

Имея это в виду, вы, возможно, захотите пересмотреть выполнение события mouseout. Вы всегда можете сдвинуть его вверх, когда пользователь отправляет форму, с помощью дополнительной кнопки «Отмена» или «Закрыть».

...