Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Jquery animate() method

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 447
    Comment on it

    Hello Readers,


    The jQuery animate() method is used to create custom animations.

    If you want to create some animation effect in your HTML, then you can use jQuery .animate() method for the same.


    We use following syntax for create animation.

    Syntax:  $(selector).animate( {styles}, speed, easing, callback)
    

    jQuery animate() method includes four parameter i.e. styles, speed, easing, callback.


    Parameters:

    styles: styles parameter determines one or more CSS properties to animate.


    speed or (duration): This parameter is optional, which determines the speed of the animation(slow, fast or milliseconds). It's default value is 400 ms.


    easing: Easing is also a optional parameter which determines the speed of the element at different points of the animation. It's default value is swing.


    You need to include easing scripts to use the easing parameter. you can download the scripts link here If you want to make easing compatible with browser , then you need to include this script in your project.


    The jQuery easing plugin provide 30 different easing methods. Let's check some of them out. Easing is applied only with animate method. The effects helper methods like hide('fast'), .show('fast'), fadeIn('fast'), .toggle('fast') and so on.


    callback: This function to be executed after the animation completes.


    Here are two ways to use the easing with the .animate() method. For example, let's say I want to animate the left of a particular div. The first way to call .animate() is like this:

    <script type="text/javascript">
    $('#myDiv').animate(
        { left: 600 },      // what we are animating
        3000,               // how fast we are animating
        easeOutBounce,      // the type of easing
        function() {        // the callback
            alert('done');
    });
    </script>
    

    Here is the second way is very similar and might even look the same at first animate script.

    <script type="text/javascript">
    $('#myDiv').animate(
        { left: 600 },                  // what we are animating
        {
            duration: 3000,             // how fast we are animating
            easing: 'easeOutBounce',    // the type of easing
            complete: function() {      // the callback
                alert('done');
            }
        });
    </script>
    

    The difference is that the second method signature takes only two arguments: the properties we are animating and an object literal of settings/options. The first method signature separates out the settings/options into individual arguments.


    Here is the complete code for the animate() method with all parameters.

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#easingExp1').click(function(event) {
            $(this).animate({ left: 600 }, {
                duration: 3000,
                easing: 'easeOutBounce'
                    })
            .animate(
                { left: 0 }, {
                    duration: 3000,
                    easing: 'easeOutBounce',
                    complete: function() { // the callback
                        alert('done!');
                    }
            });
        });
    });
    </script>
    </head>
    <body>
    <div class="easingExample" id="easingExp1" style="left: 0px; width:100px; background: #c00; position: absolute; text-align: center; color: #fff;">Click Me</div>
    </body>
    </html>
    

    Find The Demo here:


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#easingExp1').click(function(event) { $(this).animate({ left: 600 }, { duration: 3000, easing: 'easeOutBounce' }) .animate( { left: 0 }, { duration: 3000, easing: 'easeOutBounce', complete: function() { // the callback alert('done!'); } }); }); }); </script>

    Click Me




    Thanks

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: