Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Функция hover (https://javascript.ru/forum/jquery/47725-funkciya-hover.html)

tishka 05.06.2014 09:13

Функция 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);
    });


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

рони 05.06.2014 11:08

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);
    });

tishka 05.06.2014 11:13

рони,
Цитата:

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

Добавление stop() не исправило ситуацию((

tishka 05.06.2014 11:17

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

tishka 05.06.2014 12:00

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


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


то есть мгновенное появление, то все работает нормально. При быстром проведении мыши по логотипам они быстро появляются и тут же с эффектом исчезают. Но, хочется именно чтобы при появлении использовался эффект slide.

рони 05.06.2014 12:03

Цитата:

Сообщение от tishka
Причем, что интересно, в гуглхроме сейчас анимация работает при наведении, а вот в мозилле - нет...

потому что пункт 2

tishka 05.06.2014 12:10

рони,
нет-нет)) там просто ошибка была в позиционировании, запутался немного. В мозилле все работало, только показывалось описание в самом верху документа, но не суть. Сейчас все нормально. 2 версии подключено, т.к. сайт на Друпале, подключен модуль jquery_update. Это для нижней карусели. Причем эта версия jquery почему-то не работает для появления описания с логотипами. Поэтому пришлось подгрузить библиотеку вторую.

рони 05.06.2014 12:13

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");
    });

tishka 05.06.2014 12:23

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


Часовой пояс GMT +3, время: 22:55.