jquery div fade in / out - продолжает анимацию после выключения мыши

У меня две проблемы с некоторыми jquery, которые я делаю в меню.

У меня есть два блока:

-------------------
| block1 | block2 |
-------------------

Блок 2 изначально скрыт.

Когда пользователь наводит курсор на блок 1, блок 2 появляется, а затем исчезает, когда пользователь наводит курсор на блок 1.

У меня две проблемы:

1) Если пользователь быстро наводит курсор мыши на / из / над / из / и т. Д., Блок 2 продолжает плавно появляться / исчезать / входить / выходить / и т. Д. В течение нескольких секунд, даже если мышь пользователя не находится на блоке 1.

2) Если пользователь наводит курсор на блок 1, а затем перемещает указатель мыши на блок 2, блок 2 исчезает - мне нужно, чтобы блок 2 оставался видимым.

Мой код jquery:

$('#block1').hover(
function(){$('#block2').fadeIn()},
function(){$('#block2').fadeOut()}
);

Я уже использую jquery на странице для других эффектов, поэтому я хочу использовать jquery, а не css, чтобы этот блок 2 исчезал и появлялся.

Спасибо


person R2D2    schedule 07.01.2014    source источник


Ответы (1)


1) Если пользователь быстро наводит курсор мыши на / из / над / из / и т. Д., Блок 2 продолжает плавно появляться / исчезать / входить / выходить / и т. Д. В течение нескольких секунд, даже если мышь пользователя не находится на блоке 1.

Вам нужно отменить анимацию на mouseOut. Для этого вы можете использовать метод остановки. http://api.jquery.com/stop/

2) Если пользователь наводит курсор на блок 1, а затем перемещает указатель мыши на блок 2, блок 2 исчезает - мне нужно, чтобы блок 2 оставался видимым.

Добавьте событие зависания к блоку 2, которое добавляет класс css, чтобы блок 2 был виден все время. Это должно быть удалено при наведении курсора мыши.

person Captain John    schedule 07.01.2014