Papermashup

Subscribe


Tweets


"RT @cpray86: Good to see the receptionist's Jpeg of an Excel file is coming along nicely... #TheApprentice https://t.co/uiPGhf64U3"

@ashleyford 1 day ago

"Translation wrong for this paper it should be: Bitte nicht den Horror-Clown (Please not the Horror-clown) https://t.co/RYOD6aND6s via @bandt"

@ashleyford 3 weeks ago

Article writer and online marketer, freelancer at Fiverr. Previously worked at Konsear.com. Contact me - mubashirmazhr[at]gmail.com

Papermashup

The jQuery Animate Method Explained

Enter the world of animation and customize the web with jQuery and the animate method

MubashirMubashir

One of the most fun parts of working with the web is animating elements on a web page.

For animations, not only do we have to understand the effects across different devices, but also the elements that change the visibility, and properties, either at a particular time or in response to an event, for example altering the size of an element when users scroll through the page etc. We have to consider all these while animating elements.

Today web animations are much more prevalent through JavaScript and the use of jQuery. Animating something has become much easier as there are tons of code samples available online, you just need to copy and paste into your project.

In this tutorial, you’ll see the jQuery method called “animate” that allows you to animate components in the web page, such as moving a spaceship, altering opacity of an image, and there are tons of other options for you to explore.

The method .animate() is one of the most useful tools within the jQuery framework, through which you can achieve amazing and smooth animations. The jQuery animate method also allows you to modify more than one attribute simultaneously, which can be of any type numeric, alphanumeric, alphabetical etc. However, in this tutorial, we’ll use numeric and alphanumeric attributes.

Animate has the following syntax:


$(selector).animate([properties] [duration] [easing] [complete_callback]);

The Code


$(document).ready(function(){
  $("button").click(function(){
    var el = $("#box");
     el.animate({height: '500px', opacity: '0.6'}, "slow");
     el.animate({width: '500px', opacity: '0.9'}, "slow");
     el.animate({height: '253px', opacity: '0.6'}, "slow");
     el.animate({width: '253px', opacity: '0.9'}, "slow");
  });
});

The Box & Button



In this animation, we took a blue (#3498db) square box exactly 253 x 253 pixels having an absolute position. The animation starts by clicking on the button that says “Start Cool jQuery Square Box Animation”. First the box goes at the bottom, then right, then top, and then to the left which was the original position of the box. During the animation, we also manipulate opacity so that it can look more professional.

flash was once used to get the same kind of effect, but jQuery does a much better job. Flash is now considered obsolete and professional web developers and designers are taking advantage of the powerful tools of jQuery and CSS3.

So in this tutorial, we learned how to control the values like height, width, opacity and others using the jQuery animate method.

Did you find this tutorial interesting? Let me know your thoughts in the comments below.

Demo Download

Article writer and online marketer, freelancer at Fiverr. Previously worked at Konsear.com. Contact me - mubashirmazhr[at]gmail.com

Comments 0
There are currently no comments.