Show Hide and Animate Controls using jQuery .animate() Method and CSS

jquery css

Next →

Tools you can use

I am sharing a simple jQuery example here that explains how to show, hide and animate HTML elements using jQuery and CSS. The methods that I am going to use for this purpose are .show(), .hide() and .animate(), along with style using CSS.

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. In-addition, 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 combined all the three jQuery methods in this single example. You can however, break these into multiple situations in your application.

Ok! Let's do it.

First, we'll add the jQuery CDN inside the <head> tag of the web page. The CDN (a js file) provides all the methods that we need to do what I've just explained above.

<head>
    <script src="https://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="https://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>

Related: What you can do with jQuery slideToggle(), slideUp() and slideDown() Methods

The jQuery Script
<script>
    $(document).ready(function () {
        $('#btAnimate').click(function () {
            // Animate the div element. A duration is set to 500 milliseconds.
            $("#divAnim").animate({ width: '500px', height: '120px' }, 500);
            $('#divC').show();          // Also show the div element.
        });

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

Also, try these new methods. That's it. Thank for reading :-).

Next →