Search within TutorialsPark

Jquery Custom Effects


Learn to use jQuery to create your own custom effects


jQuery Effects: Creating Custom Effects

Other than basic slide and fade effects, jQuery can be used to create your own custom effects.

Table : jQuery Custom Effect Methods

Method Description
animate(properties)
animate(properties, time)
animate(properties, time, function)
animate(properties, time, easing, function)
To perform a custom animation of a set of CSS properties
animate(properties, options) To animate one or more CSS properties, specifying the options as a map.

jQuery Effects : Using Slide Effects

The jQuery method of trigger() is used to manually invoke the event handlers.

The trigger() method executes the handlers in the same order as they would be executed if the events were triggered naturally.

Example: Show and Hide Methods without Arguments

Give it a TRY! » Note:All effects are applied in sequential order


jQuery Effects : Using toggle Method to Switch Element Visibility

A jQuery method of toggle() can be used to flip elements from being visible or hidden and back.

Example: Using toggle Method to Switch Element Visibility

Give it a TRY! » Note:All effects are applied in sequential order


jQuery Effects : Using the toggle(boolean) Method in one Direction

The jQuery method of toogle(boolean) `is used to restrict the way the visibility gets toggled.

If the argument is true , then only hidden element will be shown.If the value is false then the visible elements will be hidden, but hidden elements will not be made visible.

Example: jQuery Effects: Using the toggle(boolean) Method in one Direction

Give it a TRY! » Note:All effects are applied in sequential order


jQuery Effects : Animating the Visibility of Elements

The jQuery method of toggle() can also be used to animate the process of showing and hiding elements by specifying a timespan to show, hide or toggle.

Table : jQuery Basic Effect Methods

Method Description
milliseconds To specify a duration in milliseconds.
slow A shorthand almost equal to 600 milliseconds.
fast A shorthand almost equal to 200 milliseconds.

Example: Animating the Visibility of Elements

Give it a TRY! » Note:All effects are applied in sequential order