jQuery: Effects (Part 3)

animate()

$(selector).animate({params},speed,callback);

So this means that the animate effect has parameters, speed, and callback. In the params we define what we want to do, in the speed we either increase it or decrease it or we can just leave it the same, while in the callback as we discussed before, as soon as the animation is done, if there is any callback function, it will run.

Here is an example:

$("button").click(function(){
    $("div").animate({left: '50px'}, "fast");
});

What if I don’t want to animate the div to the left only, what if I want to animate multiple properties of the div?

$("button").click(function(){
    $("div").animate({
        left: '50px',
        height: '50px',
        width: '50px'
    });
});

In here it animates the div’s position, height, and width.


stop()

The stop(), stops the animation, it’s that easy.

The syntax:

$(selector).stop(stopAll,goToEnd);

Well I am sure you might be thinking, what is “stopAll” and “goToEnd”? stopAll stops all the queued animations, the goToEnd show the result of the animation without having to see the whole animation. By default both of the arguments are false and you can change them/it by inserting true.

$("#stopButton").click(function(){
    $("div").stop(false, true);
});

For more about animations: W3Schools

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s