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:

1

2

3

4

5

6

7

8

9

<Button>Clickmetohide</button>

<script>

$(document).ready(function(){

$("button").click(function(){

$("this").hide();

});

});

</script>

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:

1

2

3

4

5

6

7

8

9

10

<button>Click me toshow</button>

<pstyle=”display:none;”>Thislineisshown</p>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").show();

});

});

</script>

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<button>Click me toshow</button>

<pstyle=”display:none;”>Thislineisshown</p>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").toggle();

});

});

</script>

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:

1

2

3

4

5

6

7

8

9

10

<button>Click me tofade in</button>

<pstyle="display: none;">Thislineisshown</p>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").fadeIn();

});

});

</script>

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:

1

2

3

4

5

6

7

8

9

10

<button>ClickmetoFadeOut</button>

<p>thislineisshown</p>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").fadeOut();

});

});

</script>

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:

1

2

3

4

5

6

7

8

9

10

<button>Clickmetochangestate</button>

<p>Thislineisshown</p>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").fadeToggle();

});

});

</script>

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.

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:

1

2

3

4

5

6

7

8

9

10

<button>Click me toSlide Up</button>

<pstyle=”border:2pxsolid;height:500px;”>Thislineisshown</p>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").slideUp();

});

});

</script>

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.