javascript - .mouseenter 和 .mouseleave 无法正常工作

Question

最近我一直在尝试创建一个下拉菜单(我是 javascript 和 jQuery 的新手)。我尝试以这种方式使用函数 .mouseenter 和 .mouseleave 来做到这一点:

    $('.slideOne')
.mouseenter(function() {
    $('#one').animate({
    left: '10%'
    },100)
.mouseleave(function() {
    $('#one').animate({
    left: '-250px'
    },100);
    }); 
});

一切正常，但并不是我想象的那样。您可以在 fiddle 上看到结果:

Full screen result

以及完整代码:

Fiddle

希望您可以看到，当鼠标悬停在适当的 li 上时，ul 不一定会出现，并且鼠标离开后，它们不一定会消失。

也许有人遇到过这个问题？或者有更好的方法来创建我想要的东西吗？

Answer 1

这是使用 .hover() 的替代方法

<强> FIDDLE

$('.slideOne').hover(function () {
    $('#one').animate({
        left: '10%'
    }, 100)
}, function () {
    console.log('dgfh');
    $('#one').animate({
        left: '-250px'
    }, 100);
});

$('.slideTwo').hover(function () {
    $('#two').animate({
        left: '14%'
    }, 100);
}, function () {
    $('#two').animate({
        left: '-250px'
    }, 100);
});