How to animate the opacity of an element on mouse hover using jQuery
animate()
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.
mouseenter()
mouseleave()
opacity
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-3.5.1.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>
total answers (1)
start bookmarking useful questions and collections and save it into your own study-lists, login now to start creating your own collections.
Use the jQuery
animate()
methodYou can use the jQuery
animate()
,mouseenter()
andmouseleave()
methods in combination with the CSSopacity
property to animate the opacity of an element on mouse hover.Let's try out the following example to understand how it basically works:
need an explanation for this answer? contact us directly to get an explanation for this answer