<html>
<head>
<title>Toggle Animation Effect</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript">
$("document").ready(function aa() {
$("#panel").toggle(
function () {
// $(".spanfortoggle").animate({
// height: "150",
// padding: "20px 0",
// backgroundColor: '#000000',
// opacity: .8
// }, 500);
$("#panel").animate({fontSize:"50pt"}, 500);
},
function () {
// $(".spanfortoggle").animate({
// height: "0",
// padding: "0px 0",
// opacity: .2
// }, 500);
$("#panel").animate({ fontSize: "14pt" }, 500);
});
});
</script>
</head>
<body>
<div id="div1" class="spanfortoggle"><span style="font-size:14pt; text-align: center;">This Is Div Number One</span></div>
<div id="panel">This is A Panel</div>
</body>
</html>
No comments:
Post a Comment