Display and Fade an ASP.NET Panel or HTML DIV using jQuery

I recently saw a UI Effect on a website where on clicking a button, a panel appeared and then faded out after a few seconds. Cool and a good candidate for jQuery. Here's how to do it on an HTML DIV element or an ASP.NET Panel using jQuery


<html xmlns="http://www.w3.org/1999/xhtml">


<head runat="server">


    <title></title>


 


    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>


    <script type="text/javascript">


        $(document).ready(function() {


            $("#Panel1").hide();


            $("#Button1").click(function() {


                $("#Panel1").show().animate({ margin: 0 }, 4000).fadeOut();


            });


        });


 


    </script>


</head>


<body>


    <form id="form1" runat="server">


    <div>


        <asp:Panel ID="Panel1" runat="server" BackColor="Gray">


        Lorem Ipsum Lorem Ipsum Lorem Ipsum<br />


        Lorem Ipsum Lorem Ipsum Lorem Ipsum<br />


        Lorem Ipsum Lorem Ipsum Lorem Ipsum<br />


        Lorem Ipsum Lorem Ipsum Lorem Ipsum<br />       


        Lorem Ipsum Lorem Ipsum Lorem Ipsum


        </asp:Panel>


        <input id="Button1" type="button" value="Display and Fade" />


    </div>


    </form>


</body>


</html>




Download jQuery over here

No comments:

Post a Comment