Question

最近我一直试图创建一个下拉菜单（我是javascript和jQuery的新手）。我尝试使用函数.mouseenter和.mouseleave这样做：

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

一切正常，但不是我预期的方式。你可以在小提琴上看到结果：

Full screen result

和完整代码：

Fiddle

希望您可以看到，当鼠标位于aproppriate 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);
});

.mouseenter和.mouseleave无法正常工作

1 个答案: