All of the previous methods for animating elements are nice, but there’s a more elegant weapon for these uncivilized times, the $.animate() method. jQuery has a more general method for doing animations, which permits you to modify more than one attribute simultaneously. Any attribute that uses a numeric value such as top, left, height, width, and opacity is open game for manipulation by $.animate(). It accepts an object with the properties to be animated, the duration of the animation, a string denoting the easing algorithm to use, and a callback function executed upon completion:
$(selector).animate( properties, [duration,] [easing,] [complete] )
In the next example, a plain blue div is animated from left to right by 100px when the document is clicked; this is about as simple as it gets. Note that the position must be relative, absolute, or fixed in order for the animation to work.
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
div {
position: relative;
left:0;
top:0;
width:10px;
height:10px;
background-color:blue;
}
</style>
<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script type=”text/javascript”>
$(function(){
$(document).click(function(event){
$(“div#box”).animate({ left: ‘+=100px’
}, 200);
});
});
</script>
</head>
<body>
<div id=”box”>
</div>
</body>
</html>
Code snippet is from custom-animation.txt
But, like we said, you can change more than one attribute at a time. The following example animates a UFO that moves right, and fades out at the same time. The fade out is accomplished by setting the final opacity to 0.
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
img#alien {
position: relative;
left:0;
background-color:blue;
}
</style>
<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script type=”text/javascript”>
$(function(){
var winWidth = $(document).width();
var duration = 1000;
$(document).click(function(event){
$(“#alien”).animate({
opacity: 0, width: 10,
height: 10,
left: ‘+=1000px’
}, duration );
});
});
</script>
</head>
<body>
<img id=”alien” src=”ufo.png”>
</body>
</html>
Code snippet is from two-attributes.txt
As you can see, the UFO image moves, shrinks, and fades out simultaneously. Try changing the left and duration properties to experiment velocities and effects. Figure 7-1 illustrates the states of the animations.
The next example is longer, but demonstrates how you can accomplish a lot with very little code. It’s a foundation for what could turn into a “Space Invaders”-style game. At the bottom of the screen is a very primitive-looking spaceship, which moves back and forth, using the left and right arrow keys. Pressing the up arrow key fires a “laser,” which is really just a hidden div. At the top of the screen is an evil-looking space alien that hides when hit by the laser. Figure 7-2 shows this layout in action.
The following code sample shows this in full. There’s some initial CSS necessary to get this to work and then just a few lines of JavaScript are needed to wire up the animations and interactivity.
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
body {
background-color:black;
}
h1 {
color: yellow;
}
img#spaceShip {
position: absolute;
left:0;
top:80%;
background-color:blue;
}
img#invader {
position: absolute;
left:25%;
top:10%;
}
div#laser {
position: absolute;
display: none;
left:0;
top:0;
width:10px;
height:70px;
background-color: red;
}
</style>
<script src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script type=”text/javascript”>
$(function(){
var winWidth = $(document).width();
var duration = 1000;
$(document).keydown(function(event){
var keyCode = event.keyCode || event.which;
var keyMap = { left: 37, up: 38, right: 39, down: 40 };
switch (keyCode) {
case keyMap.left:
$(“#spaceShip”).animate({
left: ‘-=50’
},200);
break;
case keyMap.up:
var ufoLeft = $(”#spaceShip”).offset().left;
var ufoTop = $(”#spaceShip”).offset().top;
$(”#laser”).offset({left:ufoLeft+87, top:(ufoTop-30)});
$(“#laser”).css(“display”,”block”)
.animate({top:10}, 200, function(){
var invaderLeft = $(“#invader”).offset().left;
var laserLeft = $(”#laser”).offset().left;
if( laserLeft >= invaderLeft &&
laserLeft <= invaderLeft + 288){
$(”#invader”).hide();
$(”body”).html(”<h1>Direct Hit!</h1>”);
}
$(”#laser”).offset({left:0, top:0});
$(“#laser”).css(“display”,”none”);
});
break;
case keyMap.right:
$(“#spaceShip”).animate({
left: ‘+=50’
},200);
break;
}
});
});
</script>
</head>
<body>
<img id=”spaceShip” src=”spaceShip.png”>
<img id=”invader” src=”invader.png”>
<div id=”laser”></div>
</body>
</html>
Code snippet is from spaceInvader.txt
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc