• function

jQuery.animate jQuery.animate



Animate CSS properties using native CSS animations, if possible. Uses the original $.fn.animate() otherwise.


  1. props {Object}

    The CSS properties to animate

  2. speed=400 {Integer | String | Object}Optional

    The animation duration in ms. Will use $.fn.animate if a string or object is passed

  3. callback {function()}Optional

    A callback to execute once the animation is complete



The jQuery element

jQuery.animate overwrites jQuery.fn.animate(properties, duration, callback) and enables it to animate properties using CSS 3 animations, if supported. If the browser doesn't support CSS animations, the original jQuery.fn.animate() will be used.

Using browser CSS animations, which can make use of hardware acceleration, can improve your application performance especially on mobile devices (like the Webkit based default browsers for iPhone, iPad and Android devices).


jQuery.fn.animate is mostly compatible with the original jQuery.fn.animate() which will be used as a fallback when

  • The browser doesn't support CSS transitions
  • A property is set to show or hide which is used by jQuery internally to set the original property
  • The properties are empty
  • The elements are not DOM nodes (e.g. created with $({ test : 'object' }))
  • The element is displayed inline


The following example creates a fade-in effect using CSS animations:

  opacity : 0
  opacity : 1
}, 1000, function() {
  console.log('Animation done');

If you want to force a jQuery animation pass the jquery option. The animation callback gets passed true if the animation has been done using CSS animations:

  opacity : 0,
  jquery : true
  opacity : 1
}, 1000, function(usedCss) {
  console.log('Animation done');
  if(!usedCss) {
    console.log('Used jQuery animation');