05.06.2014, 09:13
|
Интересующийся
|
|
Регистрация: 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.
|
|
05.06.2014, 11:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
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);
});
|
|
05.06.2014, 11:13
|
Интересующийся
|
|
Регистрация: 05.06.2014
Сообщений: 27
|
|
рони,
Цитата:
|
1. в каком месте вашего сайта можно увидеть ваш hover?
|
Прямо на странице, которую я указал, табличка с логотипами. При наведении на логотип срабатывает hover. При быстром перемещении мыши над логотипами, появляющиеся надписи не исчезают, хотя должны.
Добавление stop() не исправило ситуацию((
|
|
05.06.2014, 11:17
|
Интересующийся
|
|
Регистрация: 05.06.2014
Сообщений: 27
|
|
я извиняюсь, тогда не включил разрешение на просмотр гостями. Сейчас все включено.
Последний раз редактировалось tishka, 05.06.2014 в 11:57.
|
|
05.06.2014, 12:00
|
Интересующийся
|
|
Регистрация: 05.06.2014
Сообщений: 27
|
|
Если при наведении мыши вместо
$(this).children(".views-field-title").effect('slide', 300);
поставить
$(this).children(".views-field-title").show();
то есть мгновенное появление, то все работает нормально. При быстром проведении мыши по логотипам они быстро появляются и тут же с эффектом исчезают. Но, хочется именно чтобы при появлении использовался эффект slide.
|
|
05.06.2014, 12:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
Сообщение от tishka
|
Причем, что интересно, в гуглхроме сейчас анимация работает при наведении, а вот в мозилле - нет...
|
потому что пункт 2
|
|
05.06.2014, 12:10
|
Интересующийся
|
|
Регистрация: 05.06.2014
Сообщений: 27
|
|
рони,
нет-нет)) там просто ошибка была в позиционировании, запутался немного. В мозилле все работало, только показывалось описание в самом верху документа, но не суть. Сейчас все нормально. 2 версии подключено, т.к. сайт на Друпале, подключен модуль jquery_update. Это для нижней карусели. Причем эта версия jquery почему-то не работает для появления описания с логотипами. Поэтому пришлось подгрузить библиотеку вторую.
|
|
05.06.2014, 12:13
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,112
|
|
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");
});
|
|
05.06.2014, 12:23
|
Интересующийся
|
|
Регистрация: 05.06.2014
Сообщений: 27
|
|
Большое спасибо! Не сталкивался раньше с stop(), надо обратить внимание. Век живи век учись))
|
|
|
|