Sun Dec 30, 2012 9:46 pm
<html>
<head>
<title>animatation in JQuery</title>
<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
Note you can download the JQuery package instead of using Google version. -->
<script src="jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
//move to a new position with different size and opacity.
$("button.animation1").click(function(){
$("div.ta").animate({
left:'250px',
bottom:'100px',
opacity:'0.6',
height:'200px',
width:'200px'
});
});
// move to a new position with different size and opacity.
$("button.animation2").click(function(){
$("div.to").animate({
left:'250px',
opacity:'0.6',
height:'200px',
width:'200px'
},'slow');
});
// return to original and then back again..
$("button.animation3").click(function(){
$("div.to").animate({
opacity:'toggle',
});
});
// slides or frames
$("button.animation4").click(function(){
var div=$("div.to");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
// Move step right
$("button.animation5").click(function(){
var div=$("div.to");
div.animate({ left:'250px',
left:'+=30px'},"slow");
});
$("button.animation6").click(function(){
var div=$("div.to");
// Speed can be slow,fast, or time in milliseconds
div.animate({ fontSize:'+=1em'},"slow");
});
});
</script>
</head>
<body>
<p>Moving static Divs</p>
<div class="ta" style="background:#FF2211;height:58px;width:58px;position:absolute;">
</div>
<div class="to" style="background:#77FF33;height:58px;width:58px;left:100px;position:absolute;">
CM
</div>
<br/><br/>
<br/><br/>
<button class="animation1">Animation 1</button>
<button class="animation2">Animation 2</button></br>
<button class="animation3">Toggle</button>
<button class="animation4">Animation 4</button><br/>
<button class="animation5">Step Right</button>
<button class="animation6">Larger Font</button>
</body>
</html>
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com
Powered by phpBB © phpBB Group.