With this tutorial I want to surprise you by introducing you with stylish animation effect of jQuery. jQuery has poweful .animate function that can perform amazing effcts comapared to Flash.
The animate method takes four arguments:
1. A map of style properties and values—similar to the .css() map
2. An optional speed—which can be one of the preset strings or a number of milliseconds
3. An optional easing type—an advanced option
4. An optional callback function
All together, the three arguments would look like this:
.animate({param1: 'value1', param2: 'value2'}, speed, function() {
alert('The animation is finished.');
});
jQuery Code
<script type="text/javascript" src="../jquery.js"></script>
<script language="javascript">
$(document).ready(function()
{
$('.spectra').hover(function()
{
$(this)
.animate({"height":"100px"}, 'fast')
.animate({"height":"120px"}, 'fast')
.animate({"height":"180px"}, 'fast')
.animate({"height":"150px"}, 'slow')
.animate({"height":"200px"}, 'slow');
});
});
</script>
HTML Code
<body>
<div id="main">
<div class="spectra" id="v"></div>
<div class="spectra" id="i"></div>
<div class="spectra" id="b"></div>
<div class="spectra" id="g"></div>
<div class="spectra" id="y"></div>
<div class="spectra" id="o"></div>
<div class="spectra" id="r"></div>
</div>
</body>
CSS Code
#main{
width:500px;
height:300px;
border:1px solid #d5d5d5;
padding:5px;
margin:auto;
}
.spectra{
height:200px;
width:20px;
margin:10px;
float:left;
}
#v{background-color:violet;}
#i{background-color:indigo;}
#b{background-color:blue;}
#g{background-color:green;}
#y{background-color:yellow;}
#o{background-color:orange;}
#r{background-color:red;}
To learn php,html,javascript,ajax,mysql,jquery with advanced concepts, you can visit http://advancedphptutorial.blogspot.com
Very cool and just what I was looking for 🙂 But is it possible to make them start from the bottom instead of the top?