The KIjQuery Basic Effects library encapsulates a custom implementation of the moo.fx library. Currently, only a handful of effects are implemented into the core jQuery framework. If you need more, you should check out Interface.
Important Note
All functions in the FxModule operate on a call to
. If more than one object is returned by
, the effect will be applied to all returned objects.
show(Speed, Callback)
Description
The effects module overloads the show method to now allow for a speed to the show operation. What actually happens is that the height, width, and opacity to the matched elements are changed dynamically. The only three current speeds are "slow", "normal", and "fast."
Examples
$("p").show("slow");
Note
You should not run the show method on things that are already shown. This can be circumvented by doing this:
$("p:hidden").show("slow");
hide(Speed, Callback)
Description
The hide function behaves very similarly to the show function, but is just the opposite.
Example
$("p:visible").hide("slow");
slideDown(Speed, Callback)
Description
This function increases the height and opacity for all matched elements. This is very similar to 'show', but does not change the width - creating a neat sliding effect.
Example
$("p:hidden").slideDown("slow");
slideUp(Speed, Callback)
Description
Just like slideDown, only it hides all matched elements.
Examples
$("p:visible").slideUp("slow");
fadeIn(Speed, Callback)
Description
Adjusts the opacity of all matched elements from a hidden, to a fully visible, state.
Examples
$("p:hidden").fadeIn("slow");
fadeOut(Speed, Callback)
Description
Same as fadeIn, but transitions from a visible, to a hidden state.
Examples
$("p:visible").fadeOut("slow");
fadeTo(Speed, To, Callback)
Description
Fades the element to a particular opacity between 0 and 100.
Examples
$("p:visible").fadeTo("slow", 50);
animate(Properties, Speed, Callback)
Description
Animates the matched elements to the properties passed in the properties hash.
Examples
$("div").animate({ height: 40, top: 50}, "slow");
center()
Description
Takes all matched elements and centers them, absolutely, within the context of their parent element. Great for doing slideshows.
Examples
$("div img").center();