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