Solve - $(...).animate is not a function jQuery Error

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

Solve - $(...).animate is not a function #

The "$(...).animate is not a function" jQuery error occurs for multiple reasons:

  1. Loading the slim version of the jQuery library.
  2. Loading the jQuery library twice.
  3. Specifying an incorrect path to the jQuery files.

jquery animate is not a function error

To solve the "$(...).animate is not a function" jQuery error, make sure to load the full version of the jQuery library. The slim version excludes some functions like animate().

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <button id="go">&raquo; Run</button> <div id="block">Hello!</div> <!-- ✅ load jQuery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <script src="index.js"></script> </body> </html>

We loaded the regular version of the jQuery library and then ran our code (the index.js file).

Here's the code for the index.js file.

index.js
$(document).ready(function () { $('#go').click(function () { $('#block').animate( { width: '70%', opacity: 0.4, marginLeft: '0.6in', fontSize: '3em', borderWidth: '10px', }, 1500, ); }); });

We waited for the DOM to be ready and added an event listener that shows an animation on button click.

If you open your browser and click on the button, you'll see the animation.

If you are still getting the error, make sure you're not loading the jQuery library twice. Loading the library twice causes the initialization process to be re-run and might cause the error.

If you are loading the jQuery library from a file on your local file system, make sure to specify the path to the file correctly. Specifying an incorrect path to a script is equivalent to not loading the script at all.

You can check if you're loading the script correctly when you open the console in your browser. If you see any 404 errors related to loading the jQuery script, then the path to the file is incorrect.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee