Learn JQuery Step By Step Part 3: Effects

We previously talked about effects and up this point you probably have not seen any advantages to using JQuery other than than you have to type less, well, your perception about this javascript library is about to change.

In short, effects are manipulations to a web page that can be, but don’t have to be, activated by user actions (events).

Let me use my favorite effect as an example

slideToggle( speed, [callback] )

This effect can cause a division, for example, to slide in and out of the page. The effect takes at least one parameter, the speed at which something slides in milliseconds, which is mandatory and a call back function [callback] which is optional. Some events don’t take any parameters but the majority do.

To see how slide toggle works load up jquery and create an HTML file with a button and a division with an id, like this.

<button>Click Me</button>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices iaculis lorem sit amet malesuada. Duis mattis commodo ultrices.
</div>

Now add the following JQuery to the page which will cause the the division to toggle off in 1 second when you click the button.

$("button").click(function(){
    $("div#content").slideToggle(1000);
});

Now let’s add a callback function to the effect alerting the user.

$("button").click(function(){
    $("div#content").slideToggle(1000,function(){
         alert("The content division was toggled");
    });
});

You are done learning effects, now go check out the API to see what other effects there are, and stayed tuned to this blog for my next post, which will cover attributes.

blog comments powered by Disqus