Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create animation effect using jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 105
    Comment on it

    The method used to create the custom animation of a set of CSS properties is the animate() method.

    Simple syntax to use this method is:

     

    $(selector).animate({params},speed,callback);

     

    • The param parameter is the required field. Is defines the CSS properties to be animated.
    • Speed parameter is optional which specifies the duration of the effect. Values can be "slow", "fast", or milliseconds.
    • Callback parameter is also optional. It is a function which will be used to execute after completing the animation.

    Example:
     

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({left: '500px'});
        });
    });
    </script>
    </head>
    <body>
    <p>Click on the button to start animation. </p>
    <div style="background:#999;height:200px;width:200px;position:absolute;"></div>
    <button style="border:none;border-radius:40px;padding:30px;font-size:26px:background-color:#A52A2A;color:#fff">Start Animation</button>
    </body>
    </html>

    NOTE: By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!

    Click Here for output.

 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: