jQuery Animations June 24th, 2014

• Animations initiated by the user should be quick while animations initiated by the website can be slower to draw attention
• Animations create ‘eye-light’ and affordance for a website
• Use the jQuery easings plugin (or jQuery UI) since jQuery only comes with swing and linear
• A common configuration of the method’s arguments is…
  1. The hash (aka object or properties in key/value pairs) of the final animation state for numeric properties
  2. The length of the animation in milliseconds
  3. The bézier curve (aka easing or animation type)

$(selector).animate(
    {
        top: 0,
        left: 0
    },
    700,
    'easeOutBounce'
);

Resources

• jQuery API