---
title: "jquery animate div with mouseenter and mouseleave"  
description: "jquery animate div with mouseenter and mouseleave"  
author: "Pravesh Singh"  
published: 2013-05-11  
updated: 2013-05-11  
canonical: https://www.mindstick.com/forum/862/jquery-animate-div-with-mouseenter-and-mouseleave  
category: "jquery"  
tags: ["jquery"]  
reading_time: 1 minute  

---

# jquery animate div with mouseenter and mouseleave

Hi [Expert](https://www.mindstick.com/articles/13120/an-expert-financial-advice-will-improve-your-finances)!\
I want to create menu that [functionality](https://www.mindstick.com/blog/136/using-watermark-functionality-in-textbox-by-jquery) 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](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic) 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.\
<[script](https://www.mindstick.com/interview/477/how-can-i-execute-a-php-script-using-command-line)> $([document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool)).ready([function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server)(){ $(".menu_option").mouseenter(function(){ $(".menu_option").animate({left:'50px'}); }); $(".menu_option").mouseleave(function(){ $(".menu_option").animate({right:'50px'}); });});</script> \
CSS line of code as following\
.menu_option {height: 50px;width: 150px;position: [relative](https://www.mindstick.com/interview/33881/overview-of-relative-absolute-fixed-and-sticky-positioning-in-css);}.menu_holder {float: left;height: 300px;width: 150px;position: relative;}\
HTML line of code as following \
<div [class](https://www.mindstick.com/blog/165/generic-class-in-c-sharp)="menu_holder"><div class="menu_option">[Content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand) for class "menu_one" Goes Here</div></div>\
Please help me!\
Your help is greatly appreciated.\
Thanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)! \

## Replies

### Reply by AVADHESH PATEL

Hi Pravesh!\
Used jQuery mouseleave event as following\
$('.menu_option').mouseleave(function(){ $('.menu_option').animate({left : 0});});\


---

Original Source: https://www.mindstick.com/forum/862/jquery-animate-div-with-mouseenter-and-mouseleave

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.