jQuery Effects

jQuery Effects

jQuery is a Java-script library which is used to enhance the appearance and flow of elements on webpage. It provides us a write less, do more mode in language.

We already has discussed about the basic syntax of jQuery.

The JQuery library provides a wide range of built in animation which web developers use in their design and produce nice looking awesome layouts. There are some popular jQuery effects which we discuss in this post.

  • Hide
  • Show
  • FadeIn
  • FadeOut
  • Slide-up
  • Slide-down
  • Animate
  • Stop

Hide ():

This effect is used to hide some element. We just have to select that element using any selector and call this function.

Syntax:

$(CSS Selector).hide (hide speed, callback function);

Example:

 

Show ():

Same as hide, show is used to show a hidden element or also used to show the element that’s display property is set to none ( display :none; ).

Syntax:

$(CSS Selector).show (showing speed, callback function);

Example:

toggle ():

This function is used to convert the actual state to another state like hide to show and show to hide.

Syntax:

$(CSS Selector).toggle ( speed, callback function);

Example:

fadeIn ():

Fade in is same like show() but they are used to show hidden elements. Taking two parameters and both are optional which are callback and speed it may be slow fast or in milliseconds.

Syntax:

$(CSS Selector).fadeIn (speed, callback function);

Example:

fadeOut ():

Fade in same like hide () but they are used to hide elements. It also takes two parameters and both are optional which are callback and speed it may be slow fast or in milliseconds.

Syntax:

$(CSS Selector).fadeOut (speed, callback function);

Example:

Fadetoggle ():

This function is used to convert the actual state to another like hide to show and show to hide.  Taking two parameters and both are optional which are callback and speed it may be slow fast or in milliseconds.

Syntax:

$(CSS Selector).fadeToggle ( speed, callback function);

Example:

 

SlideDown ():

This function is used to show hidden element by sliding down.  Taking two parameters and both are optional which are callback and speed it may be slow fast or in milliseconds.

Syntax:

$(CSS Selector).slideDown ( speed, callback function);

Example:

SlideUp ():

This function is used to hide element by sliding up.  Taking two parameters and both are optional which are callback and speed it may be slow fast or in milliseconds.

Syntax:

$(CSS Selector).slideUp ( speed, callback function);

Example:

SlideToggle ():

This function is used to show hidden element by sliding down and hide showing element to sliding up.  Taking two parameters and both are optional which are callback and speed it may be slow fast or in milliseconds.

Syntax:

$(CSS Selector).slideToggle ( speed, callback function);

Example:

Animate ():

The animate function in jQuery is used to create animations.

Syntax:

$(css selector).animate ({ parameters },animate speed, callback function);

Example:

Stop ():

This function is used to stop the current process.

Syntax:

$(CSS Selector).stop ();

Example: