jQuery Animation Part I : Simple Animation

When you want your website to offer visitors full fancy animation when they hover or click something on your website, you can achieve this using jQuery or CSS3. These days, CSS3 animation becomes popular and more flexible to use. It doesn’t delay website performance. But the only limitation is not every browsers haven’t support all features or support in their desire ways that make designers put more efforts to overcome cross-browser compatibility. In addition, developers still need to stick with drawback solutions for old browsers which have no idea about CSS3. You shouldn’t too much rely on those features if you’re targeting all users all over the world unless you’re living in 2020. Anyway, I admit it it’s time to start learning and using CSS3 animation features. For those browsers which don’t support CSS3, you can choose jQuery animation as drawback solution.

Right now, I’ll only start discussing about jQuery animate() method. I’ll start with very simple and straight forward example. Consider the following jquery codes.

$(function(){
    $('div').hover(function(){
        $(this).animate({
            paddingRight:'+=100px'
        },500);
    },function(){
        $(this).animate({
            paddingRight:'-=100px'
        },500);
    });
});

The above codes is very simple.  This code can be divided into two parts. The two arguments of hover function. The first anonymous function argument that causes an animation when you hover over the div and the second anonymous function argument that causes another animation when your mouse pointer move out of the div. These animation are simple that they increase and reduce the left padding of the div by 100px. The second argument, the number, of the animate method indicates that how long the animation will run. The numbers represent in milliseconds. When you look carefully the animate method, you will notice that the css properties passed to this method don’t follow the actual css property syntax. That’s what you have to take care when you write jquery animate method.

Animating colors isn’t as much easy as above. You need to do some calculation to calculate “in-between” state of animate start and animation end. You can use Color Animation Plugin. I won’t focus on it.

Easing


Easing refers to acceleration and deceleration occurs during the period of animating. It determines how your animations should behave. There are two types of easing, linear and swing, you can pass to animate method. Linear means constant rate. The animation occurs in a constant rate.  Swing, on the other hand, is more fancy and fun. Swing easing starts with a slow speed, then speed up then slow down at the end. Let’s see the following code.

$(function(){
    $('div').toggle(function(){
        $(this).animate({
            paddingRight:'+=150px'
        },2000,'linear');
    },function(){
        $(this).animate({
            paddingRight:'-=150px'
        },2000,'swing');
    });
});

You will notice that when the padding right property is decreased, it’s being decreased in a fancy way, slow, fast and slow.  Remember that, this code will only work on jQuery 1.7 and below. toggle() method has been deprecated since 1.9. This is what jQuery can help in animating properties in basic. I’ll come up with an alternative approach using CSS3 transition.

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

%d bloggers like this: