Here is a simple jQuery tutorial that I think many beginners will find useful. I am going to fade in a box while it drops down. This effect seems very easy to do in flash, but to some, it can be a very difficult task to achieve in jQuery. I will also add a subtle bouncing effect just for fun.
HTML Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>John Hirchak - jQuery: Chaining Multiple Effects With a Fade In</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
body {
background: url("bg.gif");
font-family: Arial, Verdana, sans-serif;
margin-top: 0px;
}
#main {
width: 960px;
margin: auto;
background: #f1f1f1;
text-align: left;
}
#header{
background: #000;
height: 100px;
padding: 10px;
color: #fff;
position: relative;
}
#content {
padding: 10px;
height: 500px;
}
#footer {
background: #000;
height: 40px;
padding: 10px;
color: #fff;
}
h1 {
padding: 10px;
border: 2px dashed #fff;
background: #333;
width: 300px;
position: absolute;
}
p {
width: 100px;
height: 100px;
background: red;
}
#title {
top: -50px;
}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="main">
<!-- Begin Header -->
<div id="header">
<h1 id="title">Header</h1>
</div>
<!-- End Header -->
<!-- Begin Content -->
<div id="content">
</div>
<!-- End Content -->
<!-- Begin Footer -->
<div id="footer">
This is the Footer
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
jquery Step 1
<script type="text/javascript">
$(document).ready(function () {
$("#title").animate({top: "+=55", opacity:1},600);
});
</script>
Here we simply grab the #title, and bump it down 84px. The Opacity is already set to 100% and the length of this animation is 1200 milliseconds long.
View jQuery Step 1
jquery Step 2
<script type="text/javascript">
$(document).ready(function () {
$("#title").animate({opacity:0},1200);
$("#title").animate({top: "+=55", opacity:1},600);
});
</script>
We are now “chaining” animation effects together. This method of scripting is very linear, so jQuery will complete one line of the animation at a time. jQuery is fading in #title at 1200 milliseconds before it drops 55px. This is not the effect I was going for, but I am not too far off.
View jQuery Step 2
jQuery Step 3
<script type="text/javascript">
$(document).ready(function () {
$("#title").animate({opacity:0},0);
$("#title").animate({top: "+=55", opacity:1},600);
});
</script>
The trick is setting the length of line #1′s animation to 0. This will remove any animation effect for that line and reduce it to a single frame. Your animation will now begin with box that is totally transparent, and it will drop down 55px.
jQuery Step 3
jQuery Step 4
<script type="text/javascript">
$(document).ready(function () {
$("#title").animate({opacity:0},0);
$("#title").animate({top: "+=55", opacity:1},600);
$("#title").animate({top: "-=5"},100);
$("#title").animate({top: "+=5"},100);
$("#title").animate({top: "-=3"},200);
});
</script>
This step is just to show off what you could do with chaining animations in jQuery.
Final Results
