Q:

How to animate the opacity of an element on mouse hover using jQuery

mhmadesk
Save to bookmark
|
2022-05-18
|
  341 
Very Easy
0

How to animate the opacity of an element on mouse hover using jQuery

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this answer

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-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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now