Home > DeveloperSection > Forums > jquery animate div with mouseenter and mouseleave
Pravesh Singh

Total Post:411

Posted on    May-11-2013 1:50 AM

 JQuery JQuery 

 1 Reply(s)
 1341  View(s)
Rate this:
Hi Expert!

I want to create menu that functionality as following

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. 

My problem is, on 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.


CSS line of code as following

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

HTML line of code as following 

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

Please help me!

Your help is greatly appreciated.

Thanks in advance! 


Total Post:604

Posted on    May-11-2013 10:03 AM

Hi Pravesh!

Used jQuery mouseleave event as following

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

Don't want to miss updates? Please click the below button!

Follow MindStick