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 [email protected]
Send Verification Mail to New User in Anguler9
Hello folks, In this Angular 7/8/9 Fireb...How to create custom select box in HTML using CSS and jQuery
Use the CSS :selected Pseudo-class with...How to Detect Browser Window is Active or not
Javascript is great programming language...Fullcalendar 4 Remove Event Example
In this example, i will show you fullcal...Image Optimization In Laravel With Spatie
Today, Laravelcode share with you one of...