LearnFast.Ninja

jQuery animate opacity

Build your custom HTML elements and mark them with CLASS. Build function for animate opacity that class elements. The main idea is to send as parameter the opacity attribute withe 0 as value. Try the complete code example to the animate in action. Note the value of opacity is a double number from 0 to 1, e.g: 0.3.

Step 1: Build your custom HTML elements and mark them with CLASS:

<div class="My_Class">

    This is a tutorial about animate opacity

</div>


Step 2: Build function for animate opacity that class elements:

function Play_Animate(Class_Name) {

    $("." + Class_Name).animate({ "opacity": "0" });

}


Step 3: The main idea:

$(".My_Class").animate({ "opacity": "0" });


Complete code:

<html>

<head>

    <title>jQuery animate opacity</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

    <style type="text/css">

        .My_Class {

            background-color: #C0C0C0;

            border: 1px solid #AAA;

            position: relative;

            width: 50%;

        }

    </style>

    <script type="text/javascript">

        function Play_Animate(Class_Name) {

            $("." + Class_Name).animate({ "opacity": "0" });

        }

    </script>

</head>

<body>

    <div class="My_Class">

        This is a tutorial about animate opacity

    </div>

    <input type="button" value="Play animate opacity" onclick="Play_Animate('My_Class');" />

</body>

</html>


Tags

jquery

jquery-animate