jQuery Tutorial

jQuery animate method to create customized animation

In jQuery, fadeTo method is used to create the custom animation using CSS properties of the selected element in the web page.

jquery animation syntax

$(selector).animation({CSS properties}, speed of animation, easing, callback function)

In jQuery, only CSS properties field is required and remaining other parameters are optional for animationmethod.

Speed of animation

"fast" - animate the element faster.

"normal" - animate the element in normal.

"slow" - animate the element slower.

milliseconds - Element animation is based on specified milliseconds.

easing

"swing" - In middle of the animation is faster but slower in beginning and end of animation.

"linear" - Animation is consistent from beginning to end.

jQuery animation method example to animate selected div element

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery animate method</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnAnimate').click(function () {
                $("#divTitle").animate({width:'350px',height:'350px', opacity:'0.4', margin:'100px'}, 15000, function () {
                    alert("customm animation example!")
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnAnimate" value="Animate"/>
    <div id="divTitle" style="height:200px;width:200px;background-color:blue;color:white;">
        div element animate testing!
    </div>
</body>
</html>

Output:

Hidden div element

Fades div after clicking on Fade To button

animates the div after clicking on Animate button

jQuery animate method example

jQuery animate method is using CSS properties to animate to the selected element.

        $(document).ready(function () {
            $('#btnAnimate').click(function () {
                $("#divTitle").animate({ width: '350px', height: '350px', opacity: '0.4', margin: '100px' });
            });
        });

jQuery animate with callback function

callback function is used to display the alert message once animates the div element for specified CSS properties when clicking on Animate button.

        $(document).ready(function () {
            $('#btnAnimate').click(function () {
                $("#divTitle").animate({width:'350px',height:'350px', opacity:'0.4', margin:'100px'},  function () {
                    alert("customm animation example!")
                });
            });
        });

Animates the div element with opacity changes for 10000 milliseconds, and callback function is used to display alert message once displayed faded div with specified opacity value.

        $(document).ready(function () {
            $('#btnAnimate').click(function () {
                $("#divTitle").animate({ width: '350px', height: '350px', opacity: '0.4', margin: '100px' }, 10000 , function () {
                    alert("customm animation example!")
                });
            });
        });

« Previous Next »

jQuery Programming Examples

jQuery animate method to create customized animation