What are the effects methods used in jQuery?

In this blog, we are Going to learn What are the effects methods used in jQuery.What are the effects methods used in jQuery?

jQuery enables us to add effects to web pages. jQuery effects can be classified into fading, sliding, hiding/showing and animation effects.

Jquery Effects

  1. Display Effects
    hide()
    show()
    toggle()
  1. Fading Effects
    fadeIn()
    fadeOut()
    fadeToggle()
    fadeTo()
  1. Sliding Effects
    slideDown()
    slideUp()
    slideToggle()
  1. Other Effects
    animation()
    delay

jQuery provides several methods for effects on web pages. Below is the full list of jQuery effect methods:

hide() – Hides the selected elements.
show() – Shows the selected elements.
toggle() Toggles between the hide() & show() methods.

fadeIn() Fades in the selected elements.
fadeOut() – Fades out the selected elements.
fadeToggle() Toggles between the fadeIn() & fadeOut() methods.
fadeTo() Fades in/out the selected elements to a given opacity.

slideDown() Slide-down (shows) the selected elements.
slideUp() Slide-up (hides) the selected elements.
slideToggle() Toggles between the slideUp() & slideDown() methods.

animation() Runs a custom animation on the selected elements.
delay() Sets a delay for all queued function on the selected elements.

Add jquery.min.js in your closing <body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Display Effect Example:

For Example: Hide <p> all elements:

$("button").click(function(){
  $("p").hide();
});

For Example: Show <p> all elements:

$("button").click(function(){
  $("p").show();
});

For Example: Toggle hide & show for all <p> elements:

$("button").click(function(){
  $("p").toggle();
});

Fading Effect Example:

For Example: Fade in all <p> elements:

$("button").click(function(){
  $("p").fadeIn();
});

For Example: Fade out all <p> elements:

$("button").click(function(){
	$("p").fadeOut();
});

For Example: Toggle between fade in and fade out in separate boxes:

$("button").click(function(){
	$("p").fadeToggle();
});

For Example: Gradually change the opacity of all <p> elements:

$("button").click(function(){
  $("p").fadeTo(2000, 0.8);
});

Sliding Effect Example:

For Example: Slide-down (show) all hidden <p> elements:

$("button").click(function(){
  $("p").slideDown();
});

For Example: Slide-up (hide) all <p> elements:

$("button").click(function(){
  $("p").slideUp();
});

For Example: Toggle between slideUp() and slideDown() for all <p> elements:

$("button").click(function(){
  $("p").slideToggle();
});

Other Effect Example:

For Example: Animation an element, by changing its height:

$("button").click(function(){
  $("#div").animate({height: "400px"});
});

For Example: Delay differnt <p> element:

$("button").click(function(){
  $("#div1").delay("slow").fadeIn();
  $("#div2").delay("fast").fadeIn();
});

Hope this blog is helpful for you ,Thanks for reading this blog.

What are the effects methods used in jQuery?

expoundsofttechsolution A brief discussion about Lazy Loading in Angular.