- Creating a Custom Effects Object
- Adding a Fade Method to the Object
- Using the Fade Method
- More to Come
Adding a Fade Method to the Object
The first method that we’ll add to the Effects object is a method named fade. The fade method will fade any HTML element by passing the element’s ID (along with a few other parameters) to the method. To get started creating this method, we write the following line of code:
Effects.fade = function(id, opacStart, opacEnd, millisec, callback){}
This code includes the method construction, which defines the fade method and allows us to call it by specifying the object plus the method name and the parameters that it accepts, as shown in the following table.
|
Parameter |
Description |
|
id |
The element we want to animate. |
|
opacStart and opacEnd |
Starting and ending percentages for the opacity, respectively. If we pass 0 for the start number and 100 for the end number, for example, the element will fade in from 0% to 100%. |
|
millisec |
The duration of the fade. This is the time needed to get from the start percentage to the end percentage. |
|
callback |
This optional parameter allows you to pass a method in the form of a string to the fade method, and it will be fired when the fade completes. This trick can be extremely useful when you’re trying to determine when to trigger other code in your AJAX applications. |
Let’s take a look at the entire fade method to see how it works.
Effects.fade = function(id, opacStart, opacEnd, duration, callback)
{
Effects.changeOpacity(0, id);
var speed = Math.round(duration/100);
var timer = 0;
if(opacStart > opacEnd)
{
for(var i=opacStart; i>=opacEnd; i--)
{
setTimeout("Effects.changeOpacity("+ i +", ’"+ id +"’, "+ opacEnd +", ’"+ callback +")", (timer*speed));
timer++;
}
}
else if(opacStart < opacEnd)
{
for(var i=opacStart; i<=opacEnd; i++)
{
setTimeout("Effects.changeOpacity("+ i +", ’"+ id +"’, "+ opacEnd +", ’"+ callback +"’)", (timer*speed));
timer++;
}
}
}
The first few lines of code set a few local method variables and call another method, changeOpacity, which we’ll create shortly. We call this method because it will set the element’s opacity at 0 by default, to keep the animation smooth and uninterrupted by flickering. The two local variables that we set are speed and timer. The speed variable is composed of the duration divided by 100, which provides a number in seconds rather than passing the milliseconds as the duration. In other words, this variable represents the result of converting milliseconds into seconds. The timer variable is set to 0 by default because it will be incremented in order to create an iterative animation.
The iterative animation is a loop that’s created by the setTimeout method and a loop that’s based on the direction of the animation. The direction of the animation is determined by comparing the opacStart and opacEnd percentages. If the starting opacity is greater than the ending opacity, we use a reverse loop in order to fade the element iteratively by decrementing the numbers—and vice versa if the starting opacity is less than the ending opacity.
Within each loop, the same code is fired. This code consists of the timer variable being incremented; and the setTimeout, which fires the changeOpacity method that I mentioned at the beginning of the method. This method is fired repeatedly to produce the animation. Each time it’s called, a new number is passed, representing the opacity level to which to change the element. The element ID is passed as a second parameter to indicate the target element. The last two parameters are the opacEnd and callback variables. The opacEnd variable will be used to determine if the fade has reached the end, and the callback method will be fired when this is true.
Now let’s take a look at the changeOpacity method’s logic:
Effects.changeOpacity = function(opacity, id, endPoint, callback)
{
var _style = document.getElementById(id).style;
_style.opacity = (opacity / 100);
_style.MozOpacity = (opacity / 100);
_style.KhtmlOpacity = (opacity / 100);
_style.filter = "alpha(opacity=" + opacity + ")";
if(opacity == endPoint && callback != null)
{
eval(callback);
}
}
Earlier, when covering the setTimeout call in the fade method, I discussed the parameters that this method accepts. This method takes element id, gets the element by ID, and sets a variable named _style to the element’s style property. Once we have this property, we set the opacity in four different ways (in order to cover all of the different browser types). As this method is fired repeatedly, it checks to determine whether the opacity has reached its endpoint. If so, and the callback method is defined, the callback method is evaluated and fired.
Now that we’ve created the method, let’s learn how to use it.