LearnFast.Ninja

jQuery show fade effect animation

Define the div invisible. Write display none in the style. Use jQuery fadein script to show the div with animation. Try Working example code.

Step 1: Define the div invisible. Write display none in the style.
<div id="My_Div" style="displaynone;">

Step 2: Use jQuery fadein script to show the div with animation.
$("#My_Div").fadeIn(300);

Working example code:

<!DOCTYPE html>

<html>

<head>

    <title>Untitled Page</title>

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

    <script type="text/javascript">

        function Show_My_Div() {

            $("#My_Div").fadeIn(300);

        }

        function Hide_My_Div() {

            $("#My_Div").fadeOut(300);

        }

    </script>

    <style type="text/css">

        #My_Div {

            background-color: #fff;

            border-radius: 4px;

            border: 1px solid #ccc;

            box-shadow: 0px 0px 5px #ccc;

            box-shadow: 0px 0px 15px #ccc;

            box-shadow: 0px 0px 25px #4d4d4d;

            padding: 10px;

            height: 100px;

            width: 200px;

        }

    </style>

</head>

<body>

    <a onclick="Show_My_Div()" style="cursor: pointer; text-decoration: underline;">Show Success Div

    </a>

    <br />

    <div id="My_Div" style="display: none;">

        Text

        <br />

        <a onclick="Hide_My_Div()" style="cursor: pointer; text-decoration: underline;">Close

        </a>

    </div>

</body>

</html>


Result:


Tags

jquery

show hide