Previous | Table of Contents | Next

{ jQuery Animations. }

Objectives:

By the end of this chapter, you should be able to:

  • Utilize jQuery animations to add additional dynamic behavior to a page
  • Use common jQuery methods like fade / slide / hide / show to animate elements

jQuery Animations

jQuery comes with a few helpful built-in animations, as well as the ability to create your own using the animate function. These animations used to be more popular, but with CSS transitions/animations they have fallen a bit out of favor. However, they are still good to know, so let's take a look at some examples. Let's continue to use our HTML example from the previous chapter:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <article>
        This is an article.
        <div>
            <p>This is a paragraph inside of a div inside of an article.</p>
        </div>
        <input id="edit_user" type="text" value="My user name">
        <ul class="items">
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </article>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
</body>
</html>

fade / slide / hide / show

Fading, sliding, hiding and showing are very common ways to manipulate the visibility of elements on the page with jQuery. To explore some common methods, put the following JavaScript code in a script tag below where you loaded jQuery:

$(document).ready(function(){
    $("article").hide();
    $("article").fadeIn(2000); // fade in over 2000 milliseconds (there are also animations for sliding as well)
    var toggleShow = true;
    $("article").on("click", function(){
        if(toggleShow){
            $("#edit_user").show();
        } else {
            $("#edit_user").hide();  
        }
        $(".items").slideToggle(500); // if hidden, then slideIn. If showing, then slideOut.
        toggleShow = !toggleShow;  // switch the value of the boolean  
    });
});

Click on the article once it fades in to execute the callback written above!

You can also perform more general animations, similar to CSS animations, using jQuery's animate function. Here is an example of a custom animation. Replace the previous example with the following code inside of a script tag:

$(document).ready(function(){
  $(".items").click(function() {
    $("li").animate({
      // what properties to manipulate
      opacity: 0.5,
      marginLeft: "+=100",
    }, 5000, function() {
      // this code will be executed when the animation is complete
      $("p").css("font-size","+=5");
    });
  });
});

(This example highlights another nice feature in jQuery: you can increment numerical property values by passing in a string of the form "+=NUMBER". In this case, clicking on the ul increments the left margin of each li by 100 pixels, and once the animation is complete the font size of each p tag is incremented by 5 pixels.)

Although much of this functionality can now be done using CSS animations, it is important to know how to do simple animations with jQuery and many of these methods like slide, fade, and delay are commonly used in jQuery applications. Remember that these methods have either two options slideDown or slideUp and fadeIn or fadeOut and a useful switch between each one using slideToggle and fadeToggle.

You can read more about the animate function here.

When you're ready, move on to jQuery Events

Continue

Creative Commons License