Code has been added to clipboard!

Learn to Run Custom jQuery Animations in Your Web Page

Reading time 3 min
Published Jul 3, 2019
Updated Jan 21, 2020

jQuery animation: Main Tips

  • The jQuery .animate() method runs a custom animation by modifying a set of CSS properties on the selected element.
  • There are two types of syntax you may use.
  • Not all CSS properties can be animated using jQuery .animate(). Check the list of animatable CSS properties.

Two Ways to Use .animate()

The jQuery .animate() runs a custom animation by changing CSS properties on an HTML element. These are altered by gradually increasing or decreasing their value throughout a period of time, which can also be modified.

There are two ways of using this method. You can either define four arguments, or use options argument for the properties of jQuery animations.

Specifying Values

The first way to run custom jQuery animations uses syntax like this:

$("selector").animate(styles, speed, easing, function);

The example below shows that only the styles are required to define:

The function takes four arguments:

  • styles is entered in property-value pairs wrapped in curly brackets. The values must also be wrapped in quotes. Property names must be written in camel case.
  • speed - a numeric value, specifying the number of milliseconds that the animation lasts before taking full effect. It can also be a keyword such as slow or fast. If omitted, the default value is 400.
  • easing - a keyword specifying whether the speed of the animation should consistent (linear value) or begin slow and speed up (swing value). If omitted, the default value is swing.
  • function - a callback function to execute once the animation is completed.

Using Options

The second type of .animate() jQuery syntax you can use to run animations looks like this:

$("selector").animate(styles,options);

Two types of arguments are accepted. You enter styles, and then list the options. This argument comes in similar kind of pairs as styles, except that they are properties of the animation:

Options to Include

The syntax for the options argument is a lot like defining a JavaScript object property. Before each function, you need to write the name of the argument value and separate them with commas:

$("selector").animate({styles},{optionName1: value, optionName2: function(){/* code of the function */)});

There are multiple types of options you may use with .animate jQuery method. See them listed and explained here:

Option Description
duration Animation duration in milliseconds, or a keyword value such as fast or slow.
easing A keyword specifying whether the speed of the animation should be consistent (linear) or begin slow and speed up (swing).
queue A boolean value placing the jQuery animation in the queue along with other effects if true and starting it immediately if false.
Since jQuery 1.7, this option can also be defined in a string that represents the name of the specific queue to place the jQuery animation in.
specialEasing An object containing values specified by the styles argument and their corresponding functions for easing.
step A function to be called for every jQuery animation of every element animated using this method.
progress A function to be called for every step of the animation.
complete A function to be called once the animation finishes.
start A function to be called once the animation starts.
done A function to be called once the animation finishes (Promise object is completed).
fail A function to be called in case the animation fails to finish.
always A function to be called no matter whether the animation finishes or not.
Learn jQuery
Introduction
Selectors
Events
Event Methods
Download
Callback
Chaining
Get and Set
Add Element
Remove Element
Traverse
Parent
Children
Sibling Traverse
Filtering
jQuery AJAX
Effects
Show and Hide
Fade Effect
Slide Effect
Animate Effect
Manipulate CSS
Width and Height
.addClass()
.after()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind() (deprecated)
.blur()
.change()
.click()
.clone()
.css()
.dblclick()
.delay()
.delegate() and .undelegate() (deprecated)
.detach()
.empty()
.end()
.error() (deprecated)
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.finish()
.focus()
.focusIn()
.focusOut()
.hasClass()
.height()
.hide()
.hover()
.html()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.keypress()
.keyup()
.live() and .die() (deprecated)
.load() (deprecated)
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.position()
.prepend()
.prependTo()
.prop()
.proxy()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind() (deprecated)
.unload() (deprecated)
.unwrap()
.val()
.width()
.wrap()
Event Properties
event.currentTarget
event.preventDefault()
event.relatedTarget
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery .find()
jQuery .keydown()
jQuery.noConflict()
pageY and pageX