JQuery Animations

The last article explained how we can JQuery slide effects to slide up and slide down html elements on the webpage. This article explains how JQuery animations work. JQuery contains animate() method which is used for creating amazing animations. The animate method takes three parameters. The first is the parameters for animation, the second is the speed and the third is callback. Last two parameters are optional. The animate method executes on the element which we want to animate. Take a look at the following example to see a simple animation in JQuery.

<!DOCTYPE html>
<html>
<head>
    
    <title>Slide down Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $('button').click(function(){
           $('.circle').animate(
               {top: '400px'}
           );
              
         });
           
         });
      </script>
    <style>
        
    
        .circle{
            background-color: cornflowerblue;

           width: 200px;
            height: 200px;
            border-radius: 100%;
            position: absolute;
            margin: 0 auto;
            left: 50%;
            margin-top: 20px;
            margin-left: -100px;

    
        }
    </style>
</head>
    
<body>
    
    <div style="text-align:center">
    <button>Move Circle</button>
    <div class="circle"></div>
    </div>
    
    
</body>

</html>

Download Code
Run Code

The above html page contains a button at the top center of the page and a blue circle under the button. This blue circle is a div with class circle. When you click on the button, an event is fired. JQuery click event handles this function. Inside the click event a function is located which animates the circle div by pushing it 400px down the page.If you click the button, you will see your blue circle moving down 400px. This is due to the animate function.

It is pertinent to mention here that by default html elements are statically positioned. Therefore, to move elements, mark them as absolute, fixed or relative using CSS properties

Animating Multiple Properties

In the last example, we animated the circle div via single property. Animate function can take multiple parameters for animating an html element. Have a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>Slide down Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $('button').click(function(){
           $('.circle').animate(
               {top: '400px',
                opacity: '0.5',
                height: '100px',
                width: '100px'
               }
           );
              
         });
           
         });
      </script>
    <style>
        
    
        .circle{
            background-color: cornflowerblue;

           width: 200px;
            height: 200px;
            border-radius: 100%;
            position: absolute;
            margin: 0 auto;
            left: 50%;
            margin-top: 20px;
            margin-left: -100px;

    
        }
    </style>
</head>
    
<body>
    
    <div style="text-align:center">
    <button>Move Circle</button>
    <div class="circle"></div>
    </div>
    
    
</body>

</html>

Download Code
Run Code

Now, if you run the above code, you will see that when you click the button, the blue circle not only moves down but it also shrinks in size and its opacity decreases.

<<< JQuery Slide EffectsJQuery Callback Functions >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .