Tuesday, July 17, 2012

Asp.Net jQuery UI Accordion Animate


In this post Asp.Net jQuery UI Accordion Animate we shall see on how to add animation effects which will plan when the panels of the accordion expands/contracts.

Add a DIV tag animateAccordion to the page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path. 

Notice that the accordion panels expand/collapse with animation effects. The other possible animation effects are as follows.
            easeInQuad
            easeInCubic
            easeInQuart
            easeInQuint
            easeInSine
            easeInExpo
            easeInCirc
            easeInElastic
            easeInBack
            easeInBounce

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery UI Accordion</title>
    <link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
    <script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
    <script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
    <link
type="text/css"
href="Stylesheet.css" // Add your own .css file (Optional)
rel="Stylesheet" />
    <script type="text/javascript">
$(document).ready(function() {
            //
            // Accordian - Animate
            $("#animateAccordion").accordion(
            {
                collapsible: true,
                active: false,
                animated: "easeInElastic"
            });
});
</script>
</head>
<body>
    <form id="frmAccordionrunat="server">
        <table>
            <tr valign="top">
                <td>Accordion - Animate: </td>
                <td>
                    <div id="animateAccordion">
                        <h1><a href="#" id="A4">Header 1</a></h1>
                          <div>This is the content of Section - 1</div>
                          <h1><a href="#" id="A5">Header 2</a></h1>
                          <div>This is the content of Section - 2</div>
                          <h1><a href="#" id="A6">Header 3</a></h1>
                          <div>This is the content of Section - 3</div>
                    </div>
                </td>               
            </tr>
  </table>
    </form>
</body>
</html>

Search Flipkart Products:
Flipkart.com

No comments: