首页 文章

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

提问于
浏览 次
1

我正在尝试使用jquery为导航设置动画 . 元素的初始状态是：

nav ul {
    margin-left: 150px }

当鼠标离开 Headers 时，它应该从右向左移动 . 当鼠标进入 Headers 时，它应该从左向右移动 .

仅此一点与我合作过的方法完美结合：

$('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（）似乎不再起作用，并随机突然“开火” . 你能帮我理解这个问题吗？

Fiddle

jquery mousemove mouseenter mouseleave

2 回答

  • 0

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

    我认为即使在主div上的mousemove和 Headers 上的enter事件之间也可能存在一些干扰，但是考虑到鼠标在主div上的移动以及鼠标离开 Headers 的事实与鼠标移动，我只是删除鼠标移动事件 .

    回复于
  • 0

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

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

相关问题