Skip to content

Possible typo on animate API documentation #1157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jordanmoore753 opened this issue Dec 19, 2019 · 6 comments
Closed

Possible typo on animate API documentation #1157

jordanmoore753 opened this issue Dec 19, 2019 · 6 comments

Comments

@jordanmoore753
Copy link

Hello! There may be a possible typo on the animate API documentation.

In the example shown, the code is:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 100px;
    border: 1px solid green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
 
<button id="go">&raquo; Run</button>
<div id="block">Hello!</div>
 
<script>
// Using multiple unit types within one animation.
 
$( "#go" ).click(function() {
  $( "#block" ).animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});
</script>
 
</body>
</html>

However, the next paragraph explaining it says that:

The first button shows how an unqueued animation works. It expands the div out to 90% width while the font-size is increasing.

It is my understanding that the animate method expands the div out to 70% width, since the value for the width property in the properties object is 70%.

Thank you for reading this and have a great day.

@aldimar-junior
Copy link
Contributor

Taking a look at the documentation the paragraph saying:

The first button shows how an unqueued animation works. It expands the div out to 90% width while the font-size is increasing. Once the font-size change is complete, the border animation will begin. The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.

Is referring to the examples right below it, not the one above, if you take a look at the example below the paragraph it actually expands the div out to 90% width:

<script>
$( "#go1" ).on( "click", function() {
  $( "#block1" )
    .animate({
      width: "90%"
    }, {
      queue: false,
      duration: 3000
    })
    .animate({ fontSize: "24px" }, 1500 )
    .animate({ borderRightWidth: "15px" }, 1500 );
});
</script>

It might be a good thing to change the order of the paragraphs/examples for better clarity and/or just move the mentioned paragraph and position it below the "correct" example.

@aldimar-junior
Copy link
Contributor

Probably appending "In the next example" i.e:

In the next example, the first button shows how an unqueued animation works. It expands the div out to 90% width while the font-size is increasing. Once the font-size change is complete, the border animation will begin. The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.

would increase clarity and remove the ambiguity of "is this text referring to the example above? or the one below?"

@mgol
Copy link
Member

mgol commented Apr 8, 2025

I don't think that's the correct approach; we'd have to add something like that to every single example.

I'd rather tweak the <example> definition to expand to something that will be clearer about the intent.

The <example> tag rendering is defined in grunt-jquery-content; it's an XSLT transform. Examples handling is here: https://github.com/jquery/grunt-jquery-content/blob/1abaf4b81c800f332880583e6d97b0ef6b2b44c0/tasks/jquery-xml/entries2html-base.xsl#L95-L113

Maybe we should have a header (h3?) for each example with the counter (Example 1, Example 2, etc.) which would separate them more clearly?

@aldimar-junior
Copy link
Contributor

Yeah, sure, that would be a great change, I'll take a look at the files you mentioned and see if I can make the changes

@aldimar-junior
Copy link
Contributor

aldimar-junior commented Apr 8, 2025

Done @mgol PR Nº 95, I'll close my previous PR and I'm waiting for your approval.

mgol pushed a commit to jquery/jquery-wp-content that referenced this issue Apr 14, 2025
mgol pushed a commit to jquery/grunt-jquery-content that referenced this issue Apr 14, 2025
If there's more than one example append an `<h3>` tag with the number of
the example, e.g. "Example 1".

Closes gh-95
Ref jquery/api.jquery.com#1157
Ref jquery/jquery-wp-content#481
@mgol mgol closed this as completed in f826407 Apr 14, 2025
@mgol
Copy link
Member

mgol commented Apr 14, 2025

This has been fixed and examples are more clearly separated now. Thanks to @aldimar-junior for the fix!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging a pull request may close this issue.

4 participants