13
How to animate the opacity of an element on mouse hover using jQuery
source link: https://www.laravelcode.com/post/how-to-animate-the-opacity-of-an-element-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 the opacity of an element on mouse hover using jQuery
Use the jQuery animate() method
You can use the jQuery animate(), mouseenter() and mouseleave() methods in combination with the CSS opacity property to animate the opacity of an element on mouse hover.
Let's try out the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Animate Opacity on Hover</title>
<style>
ul{
padding: 0;
list-style: none;
}
ul li {
float: left;
margin: 10px;
}
ul li a img{
opacity: 0.3;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("a").mouseenter(function(){
$(this).find("img").finish().animate({
opacity: "1"
});
}).mouseleave(function(){
$(this).find("img").finish().animate({
opacity: "0.3"
});
});
});
</script>
</head>
<body>
<ul>
<li><a href="#"><img src="club.jpg" alt="Club Card"></a></li>
<li><a href="#"><img src="diamond.jpg" alt="Diamond Card"></a></li>
<li><a href="#"><img src="spade.jpg" alt="Spade Card"></a></li>
<li><a href="#"><img src="heart.jpg" alt="Heart Card"></a></li>
</ul>
</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]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK