jQuery: Animations and Effects.

This entry is part 16 of 33 in the series jQuery Tutorial

With the advent of HTML5 and touch based computing devices such as iPhone and tablets, it is more common for programmers to make use of animation to create touch based effects in the user interface.

There are a few methods that we can use in jQuery to create animation effects.  Let’s look at .animate method.

.animate(properties, options)

Properties: An object of CSS properties and values that the animation will move toward.

Options:  Can be duration(ms), easing or others

The example below is an animation of the div with a number of different CSS properties.  The duration of the effect, which is an expansion of the div block, will be 1500ms

<!doctype html>
    <title>animate demo</title>
        div {
            background-color: #bca;
            width: 100px;
            border: 1px solid green;
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>

<button id='go'>» Run</button>
<div id='block'>Hello!</div>

    // Using multiple unit types within one animation.

    $('#go').click(function () {
            width: '70%',
            opacity: 0.4,
            marginLeft: '0.6in',
            fontSize: '3em',
            borderWidth: '10px'
        }, 1500);

Try The Code
Series Navigation<< jQuery: removeClass
jQuery: Common animation effects >>

Leave a comment

Leave a Reply