How to Create Effective Animation in JQuery

In this article I am going to explain about create effective animation in jquery.
  • 1653

jQuery Animate() Method in different style

We can use jquery animate() method we can create different type of animation. Such as change color, size change, text aliment change etc. An animation is followinh.

Example

<html>

<head>

    <script src="jquery.js"></script>

    <style>

        #bt1

        {

            padding: .5em 1em;

            text-decoration: none;

        }

        #dvm

        {

            width: 240px;

            height: 75px;

            padding: 0.4em;

            position: relative;

            background: yellow;

        }

       

    </style>

    <script>

        $(function () {

            $("#bt1").toggle(

                     function () {

                         $("#dvm").animate({

 

                             width: 500

                         }, 1000);

                     },

                     function () {

                         $("#dvm").animate({

 

                             width: 240

                         }, 1000);

                     }

              );

        });

    </script>

    <div id="dvm">

        <p>

            Hiii... Hello how are you. Where are you living in this time. This is fun

        </p>

    </div>

    <button id="bt1">

        click me</button>

</head>

</html>

Output

Before click button

any1.jpg

After click button

any2.jpg

You may also want to read these related articles: here
 
Ask Your Question 
 
Got a programming related question? You may want to post your question here
 

 

© 2020 DotNetHeaven. All rights reserved.