Custom AJAX Effects: Fading
- Creating a Custom Effects Object
- Adding a Fade Method to the Object
- Using the Fade Method
- More to Come
With all of the new AJAX effects frameworks popping up on the Web, have you ever wondered just how they do it? This article sheds some light on this question by showing how to create a custom AJAX effects object and apply custom fade functionality to it. This functionality allows you to fade any HTML elements within the page that you’re developing. Take a look at the sample and download the source code to follow along.
Let’s get started by learning how to create the object that will contain this code.
Creating a Custom Effects Object
JavaScript makes it extremely easy to create a new object. To create a custom Effects object, simply instantiate the object with the following line of code:
Effects = {};
We can append any custom methods or properties to the object within the code. To add a method or property to the object, we use dot syntax similar to the following method:
Effects.myMethod = function()
{
// Custom code here
}
Properties would look similar to the following:
Effects.myProperty = value;
With the basics down, we can begin to add the methods to create the effects we want. For this article, we’ll create a fade method, in preparation for more effects to come in later articles.