CODEWITHSUNDEEP
jquerymouseentermouseleave
Milksnake12
Milksnake12

Reputation: 561

jquery animate div with mouseenter and mouseleave

I'm trying to create a menu where the item that the mouse is over slides to the right. After the mouse leaves, I want the div to move back to its original position. Right now, when I mouse over, the div moves to the right, but when I mouse out, it just stays there and doesn't move back to the left.

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

css looks like this

.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>

Where am I going wrong?

Upvotes: 0

Views: 3814

Answers (1)

Ivan Drinchev
Ivan Drinchev

Reputation: 19581

For mouse leave you should use 

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

Upvotes: 1

Related Questions