I have successfully created an animation where a child div inside a parent div moves up by -60px when the mouse enters the parent div, and returns to its original position when the mouse leaves. However, I am facing an issue where if the mouse moves directly towards the child div, it moves up but comes back down before the mouse leaves the parent div. Can someone help me solve this problem?
You can view the issue at this link
Here is my HTML code:
<div id="box" align="center">
<div id="minibox"></div>
</div>
The CSS code used is as follows:
#box {
position:relative;
top:100px;
width:200px;
height:100px;
border:1px solid #ddd;
}
#minibox {
position:relative;
width:50px;
height:50px;
border:1px solid #333;
background-color:green;
}
And here is the jQuery code implemented:
$("#box").mouseenter(function () {
$("#minibox").animate({
top: "-60px"
}, {
duration: 180
});
});
$("#box").mouseout(function () {
$("#minibox").animate({
top: "0px"
}, {
duration: 180
});
});