CODEWITHSUNDEEP
jquerymousemovemouseentermouseleave
sc0
sc0

Reputation: 61

Mouseleave/mouseenter and mousemove interfere, causing unwanted behavoir

I'm trying to animate a navigation using jquery. The initial state of the element is:

nav ul {
    margin-left: 150px }

When the mouse leaves the header it's supposed to move from right to left. When the mouse enters the header it's supposed to move from left to right.

This alone works beautifully with the method I've worked with:

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

In case the user, after navigating to a different page, moves the mouse to the .main-wrapper section during the loading process, I want the navigation to move from right to left as well. I therefore thought about using mousemove() on the .main-wrapper as follows:

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

However when I do that the functions seem to interfere in a way that I do not understand. mouseenter() and mouseleave() seem to not work anymore and juts randomly "fire". Can you help me understand this issue?

Fiddle

Upvotes: 1

Views: 392

Answers (2)

sc0
sc0

Reputation: 61

I was able to solve the issue with the following solution:

$('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 });
});

Upvotes: 0

MikeS
MikeS

Reputation: 1764

I'm not sure what you want to accomplish but here's the issue. When you leave the header with the mouse, it moves the margin back to 0px. You have to leave the header to go to the main content div so that action moves the margin back to 0px. Once you are in the main content div the mouse move does nothing since the margin is already 0px;

I think there may be some interference between the mousemove even on the main div and the enter event on the header however given what you have in mouse move on the main div and the fact that the mouse leave on the header does the same thing as the mouse move, I'd just remove the mouse move event.

Upvotes: 0

Related Questions