jquery animate div с mouseenter и mouseleave

Question

Я пытаюсь создать меню, в котором элемент, над которым находится мышь, скользит вправо. После того, как мышь уходит, я хочу, чтобы div возвращался в исходное положение. Прямо сейчас, когда я нажимаю, div перемещается вправо, но когда я выхожу, он просто остается там и не двигается назад влево.

<script> 
$(document).ready(function(){ 
    $(".menu_option").mouseenter(function(){ 
    $(".menu_option").animate({left:'50px'}); 
    }); 
    $(".menu_option").mouseleave(function(){ 
    $(".menu_option").animate({right:'50px'}); 
    }); 
}); 
</script> 

CSS выглядит следующим образом

.menu_option { 
height: 50px; 
width: 150px; 
position: relative; 
} 
.menu_holder { 
float: left; 
height: 300px; 
width: 150px; 
position: relative; 
} 

HTML

<div class="menu_holder"> 
<div class="menu_option">Content for class "menu_one" Goes Here</div> 
</div> 

Где я буду неправильно?

Answer 1

Для мыши оставьте вы должны использовать

$('.menu_option').mouseleave(function(){ 
    $('.menu_option').animate({left : 0}); 
});