jQuery: проблемы синхронизации FadeIn / FadeOut - PullRequest
Новая
       8

jQuery: проблемы синхронизации FadeIn / FadeOut

2 голосов
/ 07 декабря 2011

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

У меня Fade работает отлично, проблема, с которой я сталкиваюсь, заключается в том, чтобы попытаться определить, был ли раскрывающийся список или нет, чтобы я мог скрыть его, если пользователь наводит курсор мыши на стилизованной ссылке, не входя в раскрывающийся список. вниз список.

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

Вот код, который у меня есть: 

$('#categories_link').live('click mouseleave', function(e){
    $('.categories').fadeIn(200, function(){
        $(this).live('mouseenter mouseleave', function(evnt){
            switch(evnt.type) {
                case "mouseenter":
                    $(this).stop(true, true)
                    $(this).data('visible', true)
                break;

                case "mouseleave":
                    $(this).data('visible', false)
                break;
            }
        })

        if(e.type == 'mouseleave') {
            if($('.categories').data('visible'))
                return;
            else
                $('.categories').fadeOut(200)
        }
    })
})

1 Ответ

1 голос
/ 07 декабря 2011

Структура очень проблематичная. Почему вы добавляете слушателей при отпускании мыши?

Лучшее, что вы можете сделать, это

  • установить появление фейдина в мышином центре
  • установить затухание при отпускании мыши с задержкой ~ 300-400 мс, используя setTimeout ()
  • установить фактическое выпадающее меню, чтобы оно постепенно исчезало при наведении мыши, используя перед этим остановку (то есть: stop (true, true) .fadeIn (200), но используйте clearTimeout () до того, как это произойдет внутри обработчика событий.
  • установить фактическое выпадающее меню на затухание при отпускании мыши

На самом деле вы должны использовать стоп (true, true) перед всеми этими анимациями.

Логика заключается в том, что если пользователь наводит курсор на раскрывающийся список, раскрывающийся список будет пытаться исчезнуть сам, тем самым отменяя исчезновение, которое должно произойти в очереди (вы добавили дополнительный таймер на 200-300 секунд).

Еще один способ сделать это - вставить раскрывающийся список внутри родительского тега, поэтому, пока вы находитесь внутри раскрывающегося списка, он все равно не исчезнет (это также работает с чистым CSS)

...