topical media & game development
lib-jquery-plugin-animate-demo.htm / htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Animate to Class v0.2 - DEMO</title>
<meta name="robots" content="noindex, nofollow">
<link href="lib-jquery-plugin-animate-animate-files-styles.css" rel="stylesheet" type="text/css" media="all">
<script src="lib-jquery-plugin-animate-animate-files-jquery-002.js"></script>
<script src="lib-jquery-plugin-animate-animate-files-jquerycolor.js"></script>
<script src="lib-jquery-plugin-animate-animate-files-jquery.js"></script>
<script>
$().ready(function(){
$(".code_container>p").toggle(function(){
this.parent().css("height","auto").css("overflow-x","scroll");
},function(){
this.parent().css("height","15px").css("overflow-x","hidden");
});
$("#go_animation1").click(function(){
$("#animation1").animateToClass("a1_class1", 1000).animateToClass("a1_class2", 1000).animateToClass("a1_class3", 1000).animateToClass("a1_class4", 1000);
});
$("#go_animation2").click(function(){
$("#animation2").animateToClass("a2_class1", 1000).animateToClass("a2_class2", 1000).animateToClass("a2_class3", 1000);
});
$("#go_animation3").click(function(){
$("#animation3").animateToClass("a3_class1", 1000).animateToClass("a3_class2", 1000).animateToClass("a3_class3", 1000).animateToClass("a3_class4", 1000).animateToClass("a3_class5", 1000);
});
$("#go_animation4").click(function(){
$("#animation4").animateToClass("a4_class1", 500);
});
$("#back_animation4").click(function(){
$("#animation4").animateToClass("a4_class2", 500);
});
});
</script>
<style>
.a4_class1{
color: #000;
background-color: #ff3300;
height: 100px;
width: 400px;
font-size: 10px;
opacity: 0.7;
margin: 60px;
padding: 60px;
/*IF NOT IE ECHO SOLID...Ie cant animate borders with border-style...so remove it from IE*/
border: #000 10px solid;
}
.a4_class2{
color: #666;
background-color: #ccc;
height: 200px;
width: 300px;
font-size: 15px;
opacity: 1;
/*IF NOT IE ECHO SOLID...Ie cant animate borders with border-style...so remove it from IE*/
border: #AAA 2px solid;
margin: 0;
padding: 5px;
}
</style>
</head><body>
<div id="container">
<h1>Animate to Class v0.2</h1>
<p><a href="http://igorvieira.com/projects/animate-to-class/jquery.animateToClass.js" class="link_download">Click here to download</a>
</p>
<p style="font-size: 24px;">
<img src="lib-jquery-plugin-animate-animate-files-diabinhoid4.jpg" align="middle">Wellcome to <b>Demo</b>nstration page!
</p>
<p>
<br>
<br>
</p>
<p class="warning"><strong>WARNING</strong>: For animations using colors, you should download the <a href="http://plugins.jquery.com/project/color" target="_blank">jquery.color plugin</a>.</p>
<div id="demos">
<h2>Simple width and height animation</h2>
<div class="code_container">
<p># View the source code...</p>
<pre><style>
#animation1{
position:relative;
float:left;
width:15px;
height:15px;
background:#900;
}
.a1_class1{ width:50px; height:50px; }
.a1_class2{ width:500px; }
.a1_class3{ height:15px; }
.a1_class4{ width:15px; }
</style>
<script>
$("#go_animation1").click(function(){
$("#animation1").animateToClass("a1_class1", 1000).animateToClass("a1_class2", 1000).animateToClass("a1_class3", 1000).animateToClass("a1_class4", 1000);
});
</script>
</pre>
</div>
<div class="cont_bt">
<button id="go_animation1">Go</button>
</div>
<div class="example">
<div id="animation1">
</div>
</div>
<h2>Simple opacity and background-color animation</h2>
<div class="code_container">
<p># View the source code...</p>
<pre><style>
#animation2{
position:relative;
float:left;
width:500px;
height:50px;
background:#900;
}
.a2_class1{ opacity:0.5; }
.a2_class2{ opacity:1; background-color:#003; }
.a2_class3{ background-color:#900; }
</style>
<script>
$("#go_animation2").click(function(){
$("#animation2").animateToClass("a2_class1", 1000).animateToClass("a2_class2", 1000).animateToClass("a2_class3", 1000);
});
</script>
</pre>
</div>
<div class="cont_bt">
<button id="go_animation2">Go</button>
</div>
<div class="example">
<div id="animation2">
</div>
</div>
<h2>Simple text animation</h2>
<div class="code_container">
<p># View the source code...</p>
<pre><style>
#animation3{
font-size:18px;
color:#060;
}
.a3_class1{ font-size:10px; color:#333; }
.a3_class2{ font-size:24px; }
.a3_class3{ color:#060; }
.a3_class4{ color:#63C; }
.a3_class5{ font-size:18px; color:#900; }
</style>
<script>
$("#go_animation3").click(function(){
$("#animation3").animateToClass("a3_class1", 1000).animateToClass("a3_class2", 1000).animateToClass("a3_class3", 1000).animateToClass("a3_class4", 1000).animateToClass("a3_class5", 1000);
});
</script>
</pre>
</div>
<div class="cont_bt">
<button id="go_animation3">Go</button>
</div>
<div class="example">
<p id="animation3">
Lorem ipsum dolor sit amet...
</p>
</div>
<h2>Another animation</h2>
<div class="code_container">
<p># View the source code...</p>
<pre><style>
#animation4{
position:relative;
float:left;
border:#C60;
color: #666;
background-color: #ccc;
height: 200px;
width: 300px;
font-size: 15px;
overflow: hidden;
opacity: 1;
border: 2px solid #aaa;
margin: 0;
padding: 5px;
}
.a4_class1{
color: #000;
background-color: #ff3300;
height: 100px;
width: 400px;
font-size: 10px;
opacity: 0.7;
margin: 60px;
padding: 60px;
/*IF NOT IE ECHO SOLID...Ie cant animate borders with border-style...so remove it from IE*/
border: #000 10px <?php if (!(strstr(_SERVER["HTTP_USER_AGENT"], "MSIE"))) { echo "solid"; } ?>;
margin: 0;
padding: 5px;
}
</style>
<script>
$("#go_animation4").click(function(){
$("#animation4").animateToClass("a4_class1", 500);
});
$("#back_animation4").click(function(){
$("#animation4").animateToClass("a4_class2", 500);
});
</script>
</pre>
</div>
<div class="cont_bt">
<button id="go_animation4">Go</button> <button id="back_animation4">Back</button>
</div>
*Animation based on <a href="http://demos111.mootools.net/Fx.Morph" target="_blank">Mootools Morph</a>.
<div class="example" style="height: 360px;">
<div id="animation4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
eleifend luctus sapien. Curabitur pretium odio. Pellentesque iaculis
magna vitae lorem tempus lacinia. Suspendisse risus risus, ultrices
eget, aliquet bibendum, fermentum id, enim. Mauris quis lacus. Ut
elementum nisl quis magna. Donec urna. Morbi congue sem in massa. Cras
in purus ac ipsum semper pretium. Nullam vitae pede in orci consectetur
pretium. Nulla libero nisi, semper quis, porta ut, facilisis nec,
ipsum. Donec enim pede, feugiat vel, semper at, dictum non, velit.
Suspendisse erat. </div>
</div>
</div>
</div>
</body></html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
