How to animate div width and height on mouse hover using jQuery ?
Last Updated :
17 Sep, 2019
In order to animate the div width and height on mouse hover, we can use the jQuery animate() method along with the mouseenter() and mouseleave() methods.
- .animate() method: The animate() method changes the state of the element with CSS style.
Syntax:
$(selector).animate({styles}, para1, para2, para3);
- .mouseenter() method: The mouseenter() method works when mouse pointer moves over the selected element.
Syntax:
$(selector).mouseenter(function)
- .mouseleave() method: The mouseleave() method works when the mouse pointer leaves the selected element.
Syntax:
$(selector).mouseleave(function)
Approach:
- Store the actual width and height of the div element on which animation is to be done using $(selector).width() method.
- When the mouse pointer event is handle the .mouseenter() and .mouseleave() methods.
- When mouse pointer is over the div element, change the width or height style property to new value of div element using .animate() method.
- Change the width or height style property of div element to previously stored values.
Example 1: Animating the div width on hover using jQuery.
<!DOCTYPE html>
< html >
< head >
< title >
How to animate div width and height
on mouse hover in jQuery ?
</ title >
< script src =
</ script >
< style type = "text/css" >
.box {
float:center;
overflow: hidden;
background: #32a852;
width: 400px;
padding: 0px;
}
/* Add padding and border to inner
content for better animation effect */
.box-inner {
width: 400px;
padding: 0px;
border: 1px solid #000000;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h3 >
jQuery | How to animate div
width on mouse hover?
</ h3 >
< hr >
< div class = "box" >
< div class = "box-inner" >
< h4 >.animate() method is used</ h4 >
< p >
GEEKSFORGEEKS - A computer
science portal for geeks.
</ p >
</ div >
</ div >
< hr >
< script type = "text/javascript" >
$(document).ready(function() {
var divWidth = $(".box").width();
$(".box").mouseenter(function(){
$(this).animate({
width: "300"
});
}).mouseleave(function(){
$(this).animate({
width: divWidth
});
});
});
</ script >
</ center >
</ body >
</ html >
|
Output:
- When pointer is on the div element:
- When pointer is not on the div element:
Example 2: Animating the div height on Hover using jQuery.
<!DOCTYPE html>
< html >
< head >
< title >
jQuery | How to animate div width
and height on mouse hover?
</ title >
< script src =
</ script >
< style type = "text/css" >
.box{
float:center;
overflow: hidden;
background: #32a852;
width: 400px;
padding: 0px;
}
/* Add padding and border to inner
content for better animation effect */
.box-inner{
width: 400px;
padding: 0px;
border: 1px solid #000000;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h3 >
jQuery | How to animate div
height on mouse hover?
</ h3 >
< hr >
< div class = "box" >
< div class = "box-inner" >
< h4 >.animate() method is used</ h4 >
< p >
GEEKSFORGEEKS - A computer
science portal for geeks.
</ p >
</ div >
</ div >< hr >
< script type = "text/javascript" >
$(document).ready(function(){
var divHeight = $(".box").height();
$(".box").mouseenter(function(){
$(this).animate({
height: "250"
});
}).mouseleave(function(){
$(this).animate({
height: divHeight
});
});
});
</ script >
</ center >
</ body >
</ html >
|
Output:
- When pointer is on the div element:
- When pointer is not on the div element:
Share your thoughts in the comments
Please Login to comment...