Show, Hide and Animate Controls using JQuery.

February 18th, 2013
In this article, we are going to display with an example on how to Show, Hide and Animate HTML elements using JQuery. For this purpose we will show to how to use JQuery “show()”, “hide()” and “animate()” method. Using these methods, we can organize and display webpages more profesionally.

For our demo, we will use an ASP.Net “Panel” control, which will act as a container to an HTML DIV element. Inside the DIV element, we will add couple buttons.

Try it your self

We will keep the DIV element “hidden” (using CSS display:none) when the page loads, only exposing the Panel and a button. The button’s click event will show the DIV (display:block) and animate the Panel by changing its “width” and “height”. The speed at which it will animate (or expand) is to 500 miliseconds.

Add the JQuery library file inside the “script” tag in the “Head” section of the Web page.

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
The Markup
<!DOCTYPE html>

<html>
<head>
    <title>Show, Hide and Animate Controls using JQuery</title>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</script>
    <style>
        body { background:#FFF; margin:0px; padding:10px; font-family:Arial,Helvetica; font-size:12px }
        
        #panAnim { font:inherit; font-size:12px; 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 }
            
        #panAnim label { width:100%; color:#009872; font-size:14px; padding:10px; }
        #panAnim 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 }
            
        #panAnim div {display:none; padding:20px 10px}
        #panAnim 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>
    <form id="form1" runat="server">
    <div>
        <asp:Panel ID="panAnim" runat="server">
            <input type="button" id="btAnimate" value="Click it" />
            <div id="divC">
                <ul><li><label>JQuery,</label></li><li><label>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>
        </asp:Panel>
    </div>
    </form>
</body>
The JQuery Script
<script>
    $('#btAnimate').click(function() {
        // ANIMATE THE PANEL CONTROL AT THE SPEED OF 500 MILISECONDS.
        $("#panAnim").animate({ width: '500px', height: '120px' }, 500);
        $('#divC').show();          // ALSO SHOW THE DIV.
    });
    // REVERSE ANIMATE.
    $('#btHide').click(function() {
        $("#panAnim").animate({ width: '80px', height: '27px' }, 500);
        $('#divC').hide();          // HIDE THE DIV.
    });    
</script>
</html>

Demo

comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!