.mouseenter和.mouseleave不能正常工作

Question

最近我一直在尝试创建一个下拉菜单（我是JavaScript和jQuery的新手）。我试图做到这一点使用功能.mouseenter和.mouseleave这样：

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

一切正常，但没有真正的办法，我就预料到了。你可以看到小提琴结果：

Full screen result

和全码：

Fiddle

希望你可以看到UL的当鼠标悬停在aproppriate里，他们不一定出现鼠标消失后不一定消失。

也许有人遇到过这个问题？还是有更好的方式来创造我想要的？

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); 
});