jQuery: Common animation effects

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

The jQuery library provides several techniques for adding animation to a web page.

These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects such as those used in jqueryui.com or jquerymobile.com.

EffectDescription
.animate()Perform a custom animation of a set of CSS properties.
.delay()Set a timer to delay execution of subsequent items in the queue.
.fadeIn()Display the matched elements by fading them to opaque.
.fadeOut()Hide the matched elements by fading them to transparent.
.fadeTo()Adjust the opacity of the matched elements.
.finish()Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.
.hide()Hide the matched elements.
.show()Display the matched elements.
.slideDown()Display or hide the matched elements with a sliding motion.
.slideUp()Hide the matched elements with a sliding motion.
.slideToggle()Display or hide the matched elements with a sliding motion.
.toggle()Display or hide the matched elements.

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>
<head>
    <title>animate demo</title>
    <style>
        div {
            background-color: #bca;
            width: 100px;
            border: 1px solid green;
        }
    </style>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
</head>
<body>

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

<script>
    // Using multiple unit types within one animation.

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

</body>
</html>
Try The Code