jQuery: Effects (Part 3)

In this post we will be discussing “Animations”, who doesn’t love animations? We will also discuss and give examples on how to stop animations.

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);
});

That’s it for jQuery Effects! Well done! We will be finishing jQuery in the next three days. In the next posts, we will be making a small test/project and then we will start a new course!

Make sure to practice a lot, if you get stuck or have any problems tell me in the comments! And don’t forget to comment which course you want to learn next.

That’s it for this post! Make sure to follow and like me on WordPress and Twitter.

FOR MORE ABOUT JQUERY EFFECTS, VISIT: W3Schools

 

— CODE DAILY

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