LearnFast.Ninja

Use jQuery fadein script to show the div with animation

In this example when you click show it fade in the div with the message.

The 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

fade