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:
Recommended Articles