Show, Hide and Animate Controls using jQuery and CSS - jQuery .animate() Method with Example

In this article, I am going to show you with an example on how to Show, Hide and Animate HTML elements using jQuery and CSS. The jQuery methods that I am going to use for this purpose are .show(), .hide() and .animate(), along with style using CSS.

Try it your self

We can now hide a group of elements on page load and allow users to show or hide the elements according to their necessity. For this example, I am using two <div> elements that will serve as containers also, I am writing the jQuery methods on these two elements.

I also have two buttons inside each <div> element. The first button’s click event will animatedly increase and decrease the width and height of the first (parent) <div>. Similarly, the second button’s click event will show and hide another <div> (child) element. The animation time is set as 500 milliseconds.

I have rather combined all the three jQuery methods in this single example. You can however, break these into multiple situations in your application.

So, let us do it.

First, we'll add the jQuery CDN inside the <head> tag of the web page. As this file will provide all the methods that, we need to do what I just explained in the above paragraph.

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
The Complete Markup
<!DOCTYPE html>
<html>
<head>
    <title>Show, Hide and Animate Controls using jQuery and CSS</title>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
        #divAnim {
            font:15px Verdana; 
            background-color:#FFF; 
            position:relative; 
            width:80px; 
            height:27px; 
            padding:5px; 
            border:solid 1px #CCF; border-radius:2px; 
            -moz-border-radius:2px; -webkit-border-radius:2px;
        }
        #divAnim label {
            width:100%; 
            color:#009872; 
            font-size:14px; 
            padding:10px; 
        }
        #divAnim input {
            padding:3px 2px; 
            border:solid 1px #3079ED; 
            border-radius:2px; 
            -moz-border-radius:2px; -webkit-border-radius:2px; 
            background:#6D9BF1; 
            color:#FFF; 
            cursor:pointer;
        }
        #divAnim div {
            display:none; 
            padding:20px 10px;
        }
        #divAnim li {
            margin:0 2px 0 0;
            display:inline;
            font-size:0.7em;
            font-style:normal;
            padding:2px 0 2px 2px;
            vertical-align:middle;
        }
    </style>
</head>
<body>
    <div id="divAnim">
        <input type="button" id="btAnimate" value="Click it" />
        <div id="divC">
            <ul>
                <li><label>jQuery, Write less do more</label></li>
            </ul>
            <ul>
                <li><label>Some useful contents inside this division.</label></li>
                <li style="float:right">
                    <input type="button" id="btHide" value="Hide it" />
                </li>
            </ul>
        </div>
    </div>
</body>

The jQuery Script
<script>
    $(document).ready(function () {
        $('#btAnimate').click(function () {
            // ANIMATE THE CONTAINER. DURATION SET TO 500 MILLISECONDS.
            $("#divAnim").animate({ width: '500px', height: '120px' }, 500);
            $('#divC').show();          // ALSO SHOW THE DIV.
        });

        // REVERSE ANIMATE.
        $('#btHide').click(function () {
            $("#divAnim").animate({ width: '80px', height: '27px' }, 500);
            $('#divC').hide('slow');          // HIDE THE DIV.
        });
    });
</script>
</html>

Demo

That's it. Thank for reading.

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+
comments powered by Disqus