Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2014, 09:13
Интересующийся
Отправить личное сообщение для tishka Посмотреть профиль Найти все сообщения от tishka
 
Регистрация: 05.06.2014
Сообщений: 27

Функция hover
Здравствуйте!

Страница: http://www.synergy-pro.biz/zakazchiki-i-partnery

Написал код:
$(".class-partner tr td .views-field-title").hide();

    $(".class-partner tr td").hover(function(){
        $(this).children(".views-field-title").effect('slide', 200);
    }, function() {
        $(this).children(".views-field-title").effect('drop', 500);
    });


Сначала при наведении на родителя дочерний элемент с эффектом показывается, потом при покидании курсора родителя - ребенок с эффектом исчезает.
Все хорошо работает, но есть проблема. Если быстро провести по всем родителям, то дочерние элементы показываются, но не успевают спрятаться. Если же навести курсор на родителя, дождаться пока сработает эффект, а потом убрать курсор - все работает нормально, дочерний элемент прячется вовремя. Как победить этот нюанс? Спасибо!

Последний раз редактировалось tishka, 05.06.2014 в 10:30.
Ответить с цитированием
  #2 (permalink)  
Старый 05.06.2014, 11:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

tishka,
1. в каком месте вашего сайта можно увидеть ваш hover?
2. зачем вы грузите несколько версий jQuery?
3. возможно вам поможет остановка предыдущей анимации
$(".class-partner tr td .views-field-title").hide();

    $(".class-partner tr td").hover(function(){
        $(this).children(".views-field-title").stop().effect('slide', 200);
    }, function() {
        $(this).children(".views-field-title").stop().effect('drop', 500);
    });
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2014, 11:13
Интересующийся
Отправить личное сообщение для tishka Посмотреть профиль Найти все сообщения от tishka
 
Регистрация: 05.06.2014
Сообщений: 27

рони,
Цитата:
1. в каком месте вашего сайта можно увидеть ваш hover?
Прямо на странице, которую я указал, табличка с логотипами. При наведении на логотип срабатывает hover. При быстром перемещении мыши над логотипами, появляющиеся надписи не исчезают, хотя должны.

Добавление stop() не исправило ситуацию((
Ответить с цитированием
  #4 (permalink)  
Старый 05.06.2014, 11:17
Интересующийся
Отправить личное сообщение для tishka Посмотреть профиль Найти все сообщения от tishka
 
Регистрация: 05.06.2014
Сообщений: 27

я извиняюсь, тогда не включил разрешение на просмотр гостями. Сейчас все включено.

Последний раз редактировалось tishka, 05.06.2014 в 11:57.
Ответить с цитированием
  #5 (permalink)  
Старый 05.06.2014, 12:00
Интересующийся
Отправить личное сообщение для tishka Посмотреть профиль Найти все сообщения от tishka
 
Регистрация: 05.06.2014
Сообщений: 27

Если при наведении мыши вместо
$(this).children(".views-field-title").effect('slide', 300);


поставить
$(this).children(".views-field-title").show();


то есть мгновенное появление, то все работает нормально. При быстром проведении мыши по логотипам они быстро появляются и тут же с эффектом исчезают. Но, хочется именно чтобы при появлении использовался эффект slide.
Ответить с цитированием
  #6 (permalink)  
Старый 05.06.2014, 12:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от tishka
Причем, что интересно, в гуглхроме сейчас анимация работает при наведении, а вот в мозилле - нет...
потому что пункт 2
Ответить с цитированием
  #7 (permalink)  
Старый 05.06.2014, 12:10
Интересующийся
Отправить личное сообщение для tishka Посмотреть профиль Найти все сообщения от tishka
 
Регистрация: 05.06.2014
Сообщений: 27

рони,
нет-нет)) там просто ошибка была в позиционировании, запутался немного. В мозилле все работало, только показывалось описание в самом верху документа, но не суть. Сейчас все нормально. 2 версии подключено, т.к. сайт на Друпале, подключен модуль jquery_update. Это для нижней карусели. Причем эта версия jquery почему-то не работает для появления описания с логотипами. Поэтому пришлось подгрузить библиотеку вторую.
Ответить с цитированием
  #8 (permalink)  
Старый 05.06.2014, 12:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

tishka,
вместо вашего кода
$(".class-partner tr td .views-field-title").hide();

    $(".class-partner td").mouseenter(function(){
        $('.views-field-title', this).stop(true,true).show("slide");
    });

    $(".class-partner td").mouseleave( function() {
        $('.views-field-title', this).stop(true,true).hide("drop",{ direction: "up" }, "slow");
    });
Ответить с цитированием
  #9 (permalink)  
Старый 05.06.2014, 12:23
Интересующийся
Отправить личное сообщение для tishka Посмотреть профиль Найти все сообщения от tishka
 
Регистрация: 05.06.2014
Сообщений: 27

Большое спасибо! Не сталкивался раньше с stop(), надо обратить внимание. Век живи век учись))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция hover (jQuery) Davert Tanz jQuery 4 26.05.2014 14:53
AJAX функция для новых html-элементов broadcast77 AJAX и COMET 25 03.03.2014 14:01
Изменение свойства :hover по клику дива BoB jQuery 6 21.10.2012 13:36
Установка цвета через функцию .css() сбрасывает цвет для :hover xintrea jQuery 4 18.08.2012 15:38
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28