jquery / jquery/learn.jquery.com

Slight confusion with description of effect function behaviour

Open
#654 1 comment 0 reactions 1 assignee View on GitHub

@arthurvr is already working on this.

Since Jun 6, 2015.

Chapter: effects
Dominant language
JavaScript
Stars
915
Forks
471
PR merge metrics
No merged PRs in 30d

Description

Hi there,

I'm a newbie who is reading through your (excellent) description, thanks for your good work!

At one point I stumbled, and I would like to share my confusion with you.

On section http://learn.jquery.com/effects/intro-to-effects/#doing-something-after-an-animation-completes, there is the statement:

"A common mistake when implementing jQuery effects is assuming that the execution of the next method in your chain will wait until the animation runs to completion. [...] It is important to realize that .fadeIn() above only kicks off the animation. Once started, the animation is implemented by rapidly changing CSS properties in a JavaScript setInterval() loop."

Later on the same page, in section http://learn.jquery.com/effects/intro-to-effects/#delay-, there is an example that seems to contradict what we've learned above:

// Hide all level 1 headings over half a second; then wait for 1.5 seconds
// and reveal all level 1 headings over 0.3 seconds
$( "h1" ).hide( 500 ).delay( 1500 ).show( 300 );

I first thought, the description might be a mistake, but according to the API documentation, this is exactly how delay() behaves. My only explanation to this is that jQuery internally checks if chained function calls refer to animations as well - and if so, chains these animations as well, probably using an animation queue. It would be much clearer if this would be explicitly stated on that page to avoid reader's confusion.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.