Mouseleave / mouseenter и mousemove вмешиваются, вызывая нежелательное поведение - PullRequest
Новая
       46

Mouseleave / mouseenter и mousemove вмешиваются, вызывая нежелательное поведение

0 голосов
/ 25 мая 2018

Я пытаюсь анимировать навигацию, используя jquery.Начальное состояние элемента: 

nav ul {
    margin-left: 150px }

Когда мышь покидает заголовок, она должна двигаться справа налево.Когда мышь входит в заголовок, она должна двигаться слева направо.

Одно это прекрасно работает с методом, с которым я работал: 

$('header')
    .mouseleave(function() {
        $('nav ul').animate({ 'margin-left': '0px' }, 250 );
    })
    .mouseenter(function() {
        $('nav ul').animate({ 'margin-left': '150px' }, 250 );
});

В случае, если пользователь после навигациина другую страницу, перемещает мышь в раздел .main-wrapper во время загрузки, я хочу, чтобы навигация также перемещалась справа налево.Поэтому я подумал об использовании mousemove () в .main-обертке следующим образом: 

  $('.main-wrapper')
    .mousemove(function() {
        $('nav ul').animate({ 'margin-left': '0px' }, 250 );
  });

Однако, когда я делаю это, функции, кажется, мешают так, как я не понимаю.mouseenter () и mouseleave (), похоже, больше не работают и случайно "выстреливают".Можете ли вы помочь мне понять эту проблему?

Скрипка

Ответы [ 2 ]

0 голосов
/ 03 июня 2018

Мне удалось решить проблему с помощью следующего решения: 

$('header')
.hover(function() {
    $('nav ul').animate({'margin-left': '425px' }, { duration: 200, queue : false });
});

$('.main-wrapper')
.hover(function() {
    $('nav ul').animate({'margin-left': '0px' }, { duration: 200, queue : false });
});
0 голосов
/ 25 мая 2018

Я не уверен, чего вы хотите достичь, но вот в чем проблема.Когда вы оставляете заголовок с помощью мыши, он перемещает поле обратно в 0px.Вы должны оставить заголовок, чтобы перейти к основному контенту div, чтобы действие вернуло поле к 0px.Как только вы попали в div основного контента, перемещение мыши ничего не делает, так как поле уже составляет 0px;

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

...