Toggle Effects
<%@ Page Language="C#" MasterPageFile="~/ParentMaster.master" AutoEventWireup="true" CodeFile="Toggle.aspx.cs" Inherits="JQuery_Toggle" Title="Untitled Page" %><
<
<asp:Content ID="Content1" ContentPlaceHolderID="contentMain" Runat="Server">script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js"></script>script type="text/javascript">$(document).ready(

$(

$(
});
$(

$(
});
$(
$(
});
$(
$(function() {".ClickMe").click(function() {".Test").slideToggle("slow");"#HideSlow #btnHide").click(function() {this).parents("#HideSlow").hide("slow");"#btnShow").click(function() {"#HideSlow").show();"#divAnimate").click(function() {this).animate({ height: "350", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em" }, "slow"); //opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});$(
$(
$(
});
$(
$(
$(
});
$(
$(
});
});this).animate({ width: "150", opacity: 0.2, marginLeft: "0.2in", fontSize: "1em" }, "slow");this).animate({ height: "150", opacity: 0.1, marginLeft: "0.4in", fontSize: "6em" }, "slow");this).animate({ width: "350", opacity: 0.4, marginLeft: "0.6in", fontSize: "2em" }, "slow");"#SlideUp").click(function() {this).parents("#SlideUpdiv").slideUp();"#SlideUpdiv").slideUp();"#SlideDown").click(function() {"#SlideUpdiv").slideDown();</
<script>style type="text/css">.Test,p.ClickMe
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
.Test
{
height:120px;
display:none;
}</
<
<
<
<
</
<
<
<
</
</
<style>table id="testToggle" cellpadding="0" cellspacing="0" class="Test">tr>td>Row1 - Cell1<br /><br /><br /><br /></td>td>Row1 - Cell2<br /><br /><br /><br /></td>tr>tr>td>Row2 - Cell1</td>td>Row2 - Cell2</td>tr>table>div class ="Test">Toggle the Lines<br /> Line 2 <br /> Line 3 <br /> Line 4</
<
<
<
<
</
<
<div>p class ="ClickMe">Click to Toggle</p>div id="HideSlow">button id ="btnHide">Hide</button>p id="pHideSlow">Hide Me Slowly<br /><br /><br /><br /><br /><br /></p>div>button id ="btnShow">Show</button>div id="divAnimate" style="background-color:Navy;color:White">This is a Test Animation</
<
<
</
<
<
</div>div id="SlideUpdiv">p>This is a slide down Example.<br /><br /><br /><br /><br /></p>div>button id="SlideUp">Slide Up</button>button id="SlideDown">Slide Down</button>asp:Content>
04:57 | Category: | 0 comments

Comments (0)

Post a Comment