I like jQuery UI. I think it’s good. It could be a lot better, but it’s a good place to start if your new to javascript. And if your new to jQuery it can really help speed up development of your website. For some reason http://jqueryui.com/demos/effect/ doesn’t show what options are available for each effect!

Option: A object/hash including specific options for the effect. [optional]

JQuery Ui Effects Options

I think it’ll be really nice if that page showed all the options that are specifically available for all effects. Until then here is a list I have made of all the options:

Blind

  • direction (the direction of the animation): Can be either “horizontal” or “vertical” [default]
  • mode (set the mode of the animation): Can be set to “show” or “hide” [default]

Bounce

  • direction (initial direction of the animation) : “up”, “down”, “left” [default], “right”
  • distance (distance to bounce): integer [default 20]
  • mode (set the mode of the animation): Can be set to “show” or “hide” or effect [default]
  • time (times to bounce): integer [default 5]

Clip

  • direction (the direction of the animation): Can be either “horizontal” or “vertical” [default]
  • mode (set the mode of the animation): Can be set to “show” or “hide” [default]

Drop

  • direction (direction of the animation) : “up”, “down”, “left” [default], “right”
  • mode (set the mode of the animation): Can be set to “show” or “hide” [default]

Explode

  • mode (set the mode of the animation): Can be set to “show” or “hide” [default]
  • pieces (number of pieces of element in explosion): integer [default 4]

Fade

  • Fade has no arguments.

Fold

  • horizFirst (set to fold horizontally first): Boolean false [default]
  • mode (set the mode of the animation): Can be set to “show” or “hide” [default]
  • size (Size to be folded to) : Integer 15 [default]

Highlight

  • color (the highlight colour ): string #ffff99 [default]
  • mode (set the mode of the animation): Can be set to “show” [default] or “hide”

Puff

  • mode (set the mode of the animation): Can be set to “show” or “hide” [default]
  • percent (percent to scale to): integer

Pulsate

  • mode (set the mode of the animation): Can be set to “show” [default] or “hide”
  • time (times to shake): integer [default 5]

Scale

  • direction (the direction of the animation): Can be either “horizontal”, “vertical” or “both” [default]
  • from (the state at the beginning of the transformation.) : object { with, height } usually not needed.
  • origin (the vanishing point, default for show/hide): array [ “middle”, “center”] [default]
  • percent (percent to scale to): integer
  • scale (area’s to be resized): “box”, “both” [default]

Shake

  • direction (initial direction of the animation) : “up”, “down”, “left” [default], “right”
  • distance (distance to shake): integer [default 20]
  • time (times to shake): integer [default 3]

Slide

  • direction (initial direction of the animation) : “up”, “down”, “left” [default], “right”
  • distance (distance of the animation): integer [default element width]
  • mode (set the mode of the animation): Can be set to “show” or “hide” [default]

Transfer

  • className (class name to be given to the element when it’s transferred.) : String [optional]
  • to (jQuery selector to transfer element to): String [example: ‘#newDiv’]

Worth noting the transfer effect will not work unless you add a ‘to’ attribute.