jQuery animate easing options

jQuery's animate function allows you to create movement effects of page elements using their CSS selector. One of the parameters for the animate function is 'easing' which allows you to control the type of movement. By default, the easing effect will be set to 'swing', the only other option available with the jQuery core is 'linear', however adding jQuery UI opens up a whole load more options. This article takes a look at what's available and how to use it.

Using the animate function

To use the animate function with an easing effect, start by adding an HTML element like so:

<div class='testMove'>Hello World!</div>

Then add the jQuery:

$( ".testMove" ).animate({right: "100px"}, 500, 'swing');

This will move our div 100px to the right over a period of half a second using the swing easing option. Now to add a few more options, add jQuery UI into the mix by adding this script to your page head:

<script type="text/javascriptsrc="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

This now opens up the following easing options:

  • linear
  • swing
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInSine
  • easeOutSine
  • easeInOutSine

Try them out!

Coveloping has a tool that allows you to test out easing effects to choose the best one for you.


Sign Up
comments powered by Disqus

Popular Tags

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.