If you first dabbled with jQuery many years ago, it might have been it's ability to do animation. That was perhaps one of jQuery's first big draws. These days, CSS can do animation as well with fairly decent browser support and it tends to be more performant, so it's less relevant. However, if you need super deep browser support, jQuery is absolutely still an option.

We've already covered how to change CSS in jQuery. It looks like this:

$("#element").css({
  "background-color": "red",
  "left": "20px"
});

Instead of instantly shifting that element to those values, we can animate them. It looks almost exactly the same:

$("#element").animate({
  "background-color": "red",
  "left": "20px"
});

Here's the Pen we made in the video:

See the Pen e111fbfa7506d19034d977b17e2160a3 by Chris Coyier (@chriscoyier) on CodePen

If we inspect that element in the browsers dev tools, we can see under the hood on how jQuery is doing that animation. Essentially, it rapidly iterates the inline styling applied to that elements

<div id="element" style="top: 0px"></div>
<div id="element" style="top: 1px"></div>
<div id="element" style="top: 2px"></div>
<div id="element" style="top: 3px"></div>
<!-- etc -->

In this video we dig into some jQuery code that someone else wrote to see how well we can dissect it.

See the Pen jQuery animate height: auto by Josh Parrett (@JTParrett) on CodePen

During that journey, we go on an interesting little side journey on animating to auto heights. This is something that neither CSS or JavaScript can do particularly well. They prefer hard numbers. Animate 10px to 200px makes sense. Animate 10px to "whatever you would normally be" isn't as easy.

In Josh's code, we find a clever function that essentially sets the height to auto, measures it, sets it back to what it was, then animates to that newly tested value. Pretty neat trick! For a more robust demo that goes back and forth and in raw JavaScript, see here.

I didn't notice until after the video ended, but jQuery actually helps us out with this as well. File that under reason to use jQuery #40985. Using .slideUp / .slideDown / .slideToggle - it just works somehow, even if the element is hidden with display: none to start.

See the Pen jQuery animate height: auto by Chris Coyier (@chriscoyier) on CodePen

To test our work in old IE, we used BrowserStack, which is also integrated in CodePen.

Comments

  1. sheriffderek
    Permalink to comment#

    Your codpen demo of the menu seems to be dead.

    • Chris Coyier
      Permalink to comment#

      Which one? I’m not seeing it at first look.

    • Chris Coyier
      Permalink to comment#

      Gonna bury for now, feel free to hit me up if there really is a dead link somewhere.

  2. Robert Mion
    Permalink to comment#

    These videos are amazing, Chris. Thank you!

    One quick bug: The ‘Next Video’ link on this page goes back to the Table of Contents, as opposed to Lesson 12.

    Thanks again!

    • Chris Coyier
      Permalink to comment#

      Got that fixed, thanks! For the curious, I have a table of contents page for the different series, which is a child page of the course. The pagination was based on children of the course page, so I just need to explicitly exclude it from the query.

      Burying because no longer relevant to thread.

  3. Richard Finelli
    Permalink to comment#

    Hi Chris, very informative video on jQuery animations! Question on the menu with the hide/show animation with the example you demonstrated. Why not just use the slideUp and slideDown in order to animate the menu up and down? What are the advantages of doing it the way we saw in the video?

    I’m a jQuery newbie so this is probably my lack of understanding.

  4. Richard Finelli
    Permalink to comment#

    Wait, never mind on that question above. I just read through your notes under the video and you mentioned slideUp and slideDown would be an easier alternative. Thanks!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.