Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Jquery animate() method

    @vipul.srivastava
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 479
    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.

    1. 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:

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

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

    1. <script type="text/javascript">
    2. $('#myDiv').animate(
    3.     { left: 600 },                  // what we are animating
    4.     {
    5.         duration: 3000,             // how fast we are animating
    6.         easing: 'easeOutBounce',    // the type of easing
    7.         complete: function() {      // the callback
    8.             alert('done');
    9.         }
    10.     });
    11. </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.

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    5. <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    6. <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js"></script>
    7. <script type="text/javascript">
    8. $(document).ready(function() {
    9.     $('#easingExp1').click(function(event) {
    10.         $(this).animate({ left: 600 }, {
    11.             duration: 3000,
    12.             easing: 'easeOutBounce'
    13.                 })
    14.         .animate(
    15.             { left: 0 }, {
    16.                 duration: 3000,
    17.                 easing: 'easeOutBounce',
    18.                 complete: function() { // the callback
    19.                     alert('done!');
    20.                 }
    21.         });
    22.     });
    23. });
    24. </script>
    25. </head>
    26. <body>
    27. <div class="easingExample" id="easingExp1" style="left: 0px; width:100px; background: #c00; position: absolute; text-align: center; color: #fff;">Click Me</div>
    28. </body>
    29. </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

    jquery animation jquery animate() method jquery methods jQuery animation list
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: