Programming Tutorials

  • View all tutorials
  • Introduction to jQuery Animation
    We're going to be going over some common ways of animating DOM elements on a web page using jQuery. First, we'll include a style.css file and a link to the latest jQuery source file.
    <!DOCTYPE html>
    <html>
    <head> 
      <meta charset="utf-8" />
      <title> jQuery Animation </title>    
      <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>  
      <link type="text/css" rel="stylesheet" href="style.css" />     
      <script>
      $(document).ready(function() {
        // jQuery code goes here		
      });
      </script>      
    </head>
    
    <body>
      <div id="hello">Hello world</div>       
    </body>  
    
    </html>
    

    Some basic styles

    We'll use the following styles in our style.css file:
    * {
      margin: 0; 
      padding: 0; 
    }
    
    #hello {
      width: 300px;
      text-align: center;
      background: lightblue;
      padding: 50px 0;
    }
    

    Animating the position

    The first simple example we'll go over is how to animate a DOM element to move it somewhere else on page. We'll first wait for an event, such as the user clicking the element, and then we'll change the margins of the element. We'll use the animate jQuery function which takes in three parameters: 1) {parameters to animate} 2) speed in milliseconds 3) callback function Below is a simple example:
    $(document).ready(function() {
      
      $('#hello').click(function() {
        $(this).animate({
          marginLeft: '200px',
          marginTop: '200px'
        }, 2000);
      });
    		
    });     
    
    Now when you click on the DOM element, it will animate towards the middle of the page. We can also provide a callback function, which can animate the element again so as to give it a zig-zag effect.
    $(document).ready(function() {
    
      function animateAgain() {
        $('#hello').animate({
          marginTop: '50px',
          marginLeft: '400px'
        }, 1000);
      }
      
      $('#hello').click(function() {
        $(this).animate({
          marginLeft: '200px',
          marginTop: '200px'
        }, 2000, animateAgain);
      });
    		
    });     
    
    You can see the following code in action here, just click on the blue box and the animation will begin.

    Animating font properties

    We have the ability to animate several properties that we can declare in CSS. Below we'll animate several font properties at once and we'll increase the size of the box the text is within. Notice that we also use the "slow" keyword instead of specifying a time in milliseconds.
    $(document).ready(function() {
      
      $('#hello').click(function() {
        $(this).animate({
          fontSize: '40px',
          opacity: '0.5',
          padding: '100px 0'
        }, "slow");
      });
    		
    });     
    
    You can see the above code in action here.

    Toggling

    A cool feature that jQuery provides some extra animation functions to slide elements around. For this example, we'll add an extra element to the page that will act as a button. We can now toggle the height of an element the following way.
    <body>
      <button id="doSomething">Click me!</button>
      <div id="hello">Hello world</div>       
    </body> 
    
    $(document).ready(function() {
      
      $('#doSomething').click(function() {
        $('#hello').slideToggle();
      });
    		
    });     
    
    If you don't want to toggle the slide effect, you can also try the slideDown and slideUp functions. You can see the above code in action here.
    mrdaniel wrote this tutorial on 5/7/16 | javascript, jquery, animation
    Comments
    Log in to submit a comment.