jQuery Effects – Hide() And Show() | Fading

Hello friends, today we will see what are the effects of jquery and we will give information about it in pronunciation.

There are a lot of jQuery effects that we will look at one by one and the main use of jQuery effects is to give your web page a new look so let’s see how the effects of jQuery work and how to use it.

jQuery Effects – Hide() and Show()

With jQuery’s hide and show method you can hide() or show() elements of HTML.

Example:

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

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

Syntax:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

Alternate speed parameter refers to hide / show speed, and values such as “slow”, “fast” or milliseconds are found below

The discretionary callback boundary is a capacity to be executed get-togethers hide() or show() technique finishes (you will get familiar with callback capacities in a later part).

The following example shows the speed parameter with hide():

Example:

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

jQuery toggle()

You can also switch between hiding and showing the element by the toggle() method.

Example:

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

Syntax:

$(selector).toggle(speed,callback);

Alternate speeds can take parameter values such as “slow”, “fast” or milliseconds:

The optional callback parameter is executed after the toggle() function is completed.

jQuery Effects – Fading

If we can make the elements fade or visible from the fading effects of jQuery, then we will see below how the fading effect works and we will know it in detail.

jQuery has the following fade methods:

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

jQuery Method : fadeIn()

jQuery uses fadeIn() to fade the hidden element.

Syntax:

$(selector).fadeIn(speed,callback);

Alternate speed parameter effect of “slow”, “fast” or milliseconds. Specifies the duration. It can take the following values:

The execution call function is performed after the optional callback parameter has been merged.

The following fadeIn() example shows a method with different parameters:

Example:

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

jQuery Method : fadeOut()

Using jQuery’s fadeOut() method fades out visible elements.

Syntax:

$(selector).fadeOut(speed,callback);

Alternate speed parameter effect of “slow”, “fast” or milliseconds. Specifies the duration. It can take the following values:

The execution call function is performed after the optional callback parameter has been merged.

The following fadeOut() example shows a method with different parameters:

Example:

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

jQuery Method : fadeToggle()

JQuery’s fadeToggle() which toggles between the two methods fadeIn() and fadeOut().

fadeToggle() If the elements faded out, they will fade.

fadeToggle() If the elements have faded in, they will fade.

Syntax:

$(selector).fadeToggle(speed,callback);

Alternate speed parameter effect of “slow”, “fast” or milliseconds. Specifies the duration. It can take the following values:

The execution call function is performed after the optional callback parameter has been merged.

The following fadeToggle() example shows a method with different parameters:

Example:

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery Method : fadeTo()

JQuery’s fadeTo() method allows the following ambiguity (values between 0 and 1) to fade.

Syntax:

$(selector).fadeTo(speed,opacity,callback);

Alternate required speed parameter effect of “slow”, “fast” or milliseconds. Specifies the duration. It can take the following values:

The required opacity (value between 0 and 1) parameter in jQuery’s fadeTo() method refers to fading for a given opacity.

The execution call function is performed after the optional callback parameter has been merged.

The following fadeTo() example shows a method with different parameters:

Example:

$("button").click(function(){
  $("#div1").fadeTo("slow", 0.15);
  $("#div2").fadeTo("slow", 0.4);
  $("#div3").fadeTo("slow", 0.7);
});

jQuery All Effect Methods

The following table lists all of the jQuery methods for creating the effects of animation.

Method	Description
animate()	Runs a custom animation on the selected elements
clearQueue()	Removes all remaining queued functions from the selected elements
delay()	Sets a delay for all queued functions on the selected elements
dequeue()	Removes the next function from the queue, and then executes the function
fadeIn()	Fades in the selected elements
fadeOut()	Fades out the selected elements
fadeTo()	Fades in/out the selected elements to a given opacity
fadeToggle()	Toggles between the fadeIn() and fadeOut() methods
finish()	Stops remove and complete all queued animations for the selected elements
hide()	Hides the selected elements
queue()	Shows the queued functions on the selected elements
show()	Shows the selected elements
slideDown()	Slides-down (shows) the selected elements
slideToggle()	Toggles between the slideUp() and slideDown() methods
slideUp()	Slides-up (hides) the selected elements
stop()	Stops the currently running animation for the selected elements
toggle()	Toggles between the hide() and show() methods