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.');
});
Live Demo Download Script
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;}
1 comments:
Very cool and just what I was looking for :) But is it possible to make them start from the bottom instead of the top?
We would love to hear from you...