Adding motion effect in asp.net website

Question

I am developing a website in asp.net c#.

I have a plus sign going through the center to the end of each side dividing the whole page into 4 parts where in each part will have some different information displayed.

I want some code that will draw the plus sign starting from the center and ending on all the four sides on page load event of the home page of website.

I know its possible by using flash but i want some code to implement this without using flash probably by using jscript or any other way. I have a link that could help http://daneden.github.io/animate.css/ since i am not able to implement the code given in this link.

Answer 1

css file

    #pnlup
    {
        background-color:aqua;
        position:absolute;
        vertical-align:bottom;
        display:none;
        margin-left:47.85%;
        bottom:300px;
        overflow:hidden;
    }

    #pnldown
    {
        position:absolute;
        vertical-align:bottom;
        margin-top:0px;
        margin-left:47.85%;
        bottom:5px;

    }
    #down
    {

        background-color:aqua;
        height: 20px;            

    }
    #down1
    {

        background-color:aqua;
        height: 265px;
        display:none;
        overflow:hidden;
    }
    #pnlleft
    {
        background-color:aqua;
        position:absolute;
        vertical-align:bottom;
        margin-top:0px;
        margin-right:47%;
        bottom:285px;  
        display:none;
        right:55px;

    }
    #pnlright
    {    
        background-color:aqua;          
        position:absolute;
        vertical-align:bottom;
        margin-top:0px;
        margin-left:48.25%;
        bottom:285px;   
        display:none;       
    }
</style>

jscript code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/jscript">
      $(document).ready(function(){
        $('#pnlup').slideDown("slow");
        $('#down1').slideDown("slow");
        jQuery('#pnlright').slideToggleWidth();
        jQuery('#pnlleft').slideToggleWidth1();
    });

    jQuery.fn.extend({
        slideRight: function() {
        return this.each(function() {
        jQuery(this).animate({width: 'show'});
        });
        },
        slideLeft: function() {
            return this.each(function() {
            jQuery(this).animate({width: 'hide'});
        });
        },
        slideRight1: function() {
            return this.each(function() {
            jQuery(this).animate({width: 'hide'});
        });
        },
        slideLeft1: function() {
            return this.each(function() {
            jQuery(this).animate({width: 'show'});
        });
        },
        slideToggleWidth: function() {
            return this.each(function() {
            var el = jQuery(this);
            if (el.css('display') == 'none') {
                el.slideRight();
            } 
            else 
            {
                el.slideLeft();
            }
      });
      },
    slideToggleWidth1: function() {
            return this.each(function() {
            var el = jQuery(this);
            if (el.css('display') == 'none') {
                el.slideLeft1();
            } 
            else 
            {
                el.slideRight1();
            }
    });
    }
    });

html code

<form id="form1" runat="server">
    <div>
        <asp:Panel ID="pnlup" runat="server" style="width:15px; height:325px;">
        </asp:Panel>
        <asp:Panel ID="pnlleft" runat="server" style="width:695px; height:15px;">
        </asp:Panel>
        <asp:Panel ID="pnlright" runat="server" style="width:695px; height:15px;">
        </asp:Panel>
        <asp:Panel ID="pnldown" runat="server" style="width:15px; height:280px;">
            <div id="down" runat="server"></div>
            <div id="down1" runat="server"></div>
        </asp:Panel>
    </div>
</form>