animate()
methodYou 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>
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 harsukh21@gmail.com
How to convert Excel File data into JSON object in JavaScript?
Today, I will share with you a very smal...How to Check If an Array Includes an Object in JavaScript
Use the JavaScript some() Method You...Laravel 7 - Dynamically Add Input Fields using HandlebarsJs
Hello Artisan In this tutorial i will...PHP Count Number of Pages in PDF File
In this post, I will give you a simple e...Django 3 Multiple File-Image Upload with Angular 9
In the precedent tutorial we have optica...