LaravelCode

Search

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

jQuery
4052 views 4 years ago
post-title

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

 

Random Articles
  • How to integrate paypal payment gateway in laravel 5.4
    Hello, today laravelcode share with you a one of the very nice tutorials of how to integrattion paypal payment gateway in your laravel to very easy way with simple example and with working code. Yo...
  • How to prevent SQL injection in PHP
    Many new web developers are unaware of how SQL queries can be manipulated with, and assume that an SQL query is a trusted command. This way SQL queries can be circumvent access controls, and bypassing...
  • Single and Multiple Files Upload in VueJs
    In this tutorial, we are going to learn how to upload single &amp; multiple files and images to the Node server from Vue.js application utilizing Express.js API. Along with that, we will withal learn...
  • How to check a checkbox is checked or not using jQuery
    Use the jQuery prop() method &amp; :checked selector The following section describes how to track the status of checkboxes whether it is checked or not using the jQuery&nbsp;prop()&nbsp;method as w...
  • How to insert HTML content into an iFrame using jQuery
    Use the jQuery contents() method You can use the jQuery&nbsp;contents()&nbsp;method in combination with the&nbsp;find(),&nbsp;val()&nbsp;and&nbsp;html()&nbsp;methods to insert text or HTML inside a...
Advertise