jQuery animate() animate opacity of an element on mouse hover

Introduction

Use the jQuery animate(), mouseenter() and mouseleave() methods with the CSS opacity property to animate the opacity.

View in separate window

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Animate Opacity on Hover</title>
<style>
    ul{/*from  w w w .  j a  va 2s.c  o m*/
        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="image1.png" alt="image1.png"></a></li>
        <li><a href="#"><img src="image2.png" alt="image2.png"></a></li>
        <li><a href="#"><img src="image3.png" alt="image3.png"></a></li>
        <li><a href="#"><img src="image4.png" alt="image4.png"></a></li>
    </ul>
</body>
</html>

Previous Next