Cool Animated Spectrum Effect with jQuery

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.');
});


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;}

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/

2 thoughts on “Cool Animated Spectrum Effect with jQuery

  1. Very cool and just what I was looking for 🙂 But is it possible to make them start from the bottom instead of the top?

Comments are closed.