We are going to explain what an effect queue is, what it is used for and how effect queues are configured in the Javascript jQuery framework.
In it we have already discussed in various articles about the effects in jQuery. In fact, this is already the fourth article that we have devoted to discussing the different ways of creating effects in this Javascript framework. To date we have published the keys to the , the versatile method , or the .
All of these methods discussed above, and some more that we haven’t reviewed yet, such as sliceUp() or sliceDown(), which work in a similar way to the already seen fadeIn() or fadeOut() methods, are used to perform various effects on web pages and They are as easy to use as calling them on the jQuery object that contains the element we want to animate. Now that we’ve gotten past this first step and know how to do a whole range of simple effects, we’re going to learn how to chain multiple effects to play one after the other.
We will see in this article and several that will follow, that chaining effects is as simple as calling all the effect methods that we want to perform. All those methods will automatically be queued and executed one after the other, without us having to do anything on our own, apart from calling the methods themselves.
Effect functions
We are going to repeat throughout the following articles a concept that I want to explain so that you know what we mean. These are the “Effects Functions” which are those available to jQuery to create special effects on web pages. As we have said, in various previous articles the effects of various of the available effect functions have already been explained and shown.
Effect functions are jQuery methods that make a change to page elements in a smooth way, that is, they alter the properties of one or more elements progressively, in an animation over time.
For example, we have the fadeOut() method, which performs an opacity effect on one or several elements, making them disappear from the page with a fade from opaque to transparent. The complementary fadeIn() method does a similar fade effect, but from transparent to opaque. Like these, we have many additional effect methods in jQuery like animate(), sliceUp() and sliceDown(), etc. In the framework documentation itself, in the Effects section of the API reference, we can see a complete list of these effect functions.
In this we have already seen several examples of these effect functions and throughout the next articles that we will publish in .com we will see various other sample applications where we can continue learning.
Default Effect Queue
When we call various effect functions available in jQuery, they are inserted into a default effect queue called “fx”. Each page element has its own default effect queue and it works automatically. When invoking the effects, they put themselves in the queue and they are executed automatically, one after the other, with the order in which they were invoked.
layer = $(“#mylayer”);
layer.fadeOut();
layer.fadeIn();
layer.slideUp();
layer.slideDown();
The effect functions, one after the other, are called in an instant, but they are not all executed at the same time, waiting for the previous one to finish before starting the next one. Fortunately, jQuery does everything on its own to manage this queue.
As we said, each page element has its own effect queue and, although we could even create other effect queues for the same element, in most cases we will have enough with the already implemented default queue.
Example of running effects on jQuery’s default queue
We are going to launch several effects on a layer and we will see how they themselves are executed in the order in which we have invoked them.
We will have a DIV element, like this:
Now we can see a function that calls various jQuery effects:
function effectTail(){
layer = $(“#mylayer”);
layer.animate({
“font-size”: “1.5em”
}, 2000);
layer.hide(1000);
layer.show(1000);
layer.animate({
“left”: “350px”,
“top”: “50px”
},1500);
layer.animate({
“font-size”: “0.75em”
}, 2000);
layer.animate({
“left”: “100px”,
“top”: “20px”
}, 1500, tailEffects);
}
It should be noted that the last of the effect functions invoked makes a call to this same function, by means of a callback, therefore, when all the effects have finished executing, the function will be invoked again and a message will be produced. infinite loop, where the same sequence of effects will be repeated all the time.
And now we can call this function when the page is ready:
$(document).ready(function(){
effectTail();
});
The result of the complete exercise can be .
With this we have made our first example of an effects queue. It’s been easy, right? But of course, from here things can be complicated as much as we want, or need. In the next article, to do things like stop them, parse them, load functions of other types to run in the queue, etc.
Facebook Comments
Disqus