Mouseleave / mouseenter和mousemove会干扰，导致不必要的行为

Question

我正在尝试使用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部分，我希望导航也从右向左移动。因此，我考虑在.main-wrapper上使用mousemove（），如下所示：

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

然而，当我这样做时，这些功能似乎以一种我不理解的方式干扰。 mouseenter（）和mouseleave（）似乎不再起作用，并随机突然“开火”。 你能帮我理解这个问题吗？

Answer 1

我不确定你想要完成什么，但问题就在这里。当您使用鼠标离开标题时，它会将边距移回0px。您必须保留标题以转到主内容div，以便操作将边距移回0px。一旦你进入主内容div，鼠标移动什么都不做，因为边距已经是0px;

我认为即使在主div上也可能存在一些干扰，但是在标题上的输入事件可能会有一些干扰，但是在主要div上鼠标移动的情况下，以及鼠标在标题上留下的事实是相同的当鼠标移动时，我只是删除鼠标移动事件。

Answer 2

我能够通过以下解决方案解决问题：

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