c# - Adding motion effect in asp.net website -
i developing website in asp.net c#.
i have plus sign going through center end of each side dividing whole page 4 parts in each part have different information displayed.
i want code draw plus sign starting center , ending on 4 sides on page load event of home page of website.
i know possible using flash want code implement without using flash using jscript or other way. have link http://daneden.github.io/animate.css/ since not able implement code given in link.
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>
Comments
Post a Comment