11
How to animate div width on mouse hover using jQuery
source link: https://www.laravelcode.com/post/how-to-animate-div-width-on-mouse-hover-using-jquery
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to animate div width on mouse hover using jQuery
1587 views
2 years ago jQuery
Use the jQuery animate() method
You can simply use the jQuery animate() method in combination with the mouseenter() and mouseleave() methods to animate the width of a <div> element on mouseover.
Let's take a look at an example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Animate Div Width on Hover</title>
<style>
.box{
width: 200px;
height: 150px;
background: #f0e68c;
border: 1px solid #a29415;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
var boxWidth = $(".box").width();
$(".box").mouseenter(function(){
$(this).animate({
width: "400"
});
}).mouseleave(function(){
$(this).animate({
width: boxWidth
});
});
});
</script>
</head>
<body>
<p><strong>Note:</strong> Place mouse pointer over the box to play the animation.</p>
<div class="box"></div>
</body>
</html>
Author : Harsukh Makwana
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
</div
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK