jQuery Effects- Hide and show

jQuery provides a simple interface to perform various amazing effects.

jQuery effect methods allow us to quickly implement common effects with minimal configuration.

jQuery hide() and show()

You can usehide()andshow()Methods to hide and display HTML elements.

The following example demonstrates the usage of hide() and show() methods:

//　Hide the normally displayed paragraph
$("#hide-btn").click(function(){
　　$("p").hide();
});
//　Display the hidden paragraph
$("#show-btn").click(function(){
　　$("p").show();
});

This ishide() Method syntax:

$(selector).hide(duration, easing, callback);

This isshow()Method syntax:

$(selector).show(duration, easing, callback);

hide()andshow()The method accepts three optional parameters:

• duration -Determine the effect willDurationHow long. Possible values: "slow", "fast", or milliseconds

• easing -Indicates the easing function to be used for the transition. Possible values: 'swing', 'linear'

• callback-Function to be called after the specified method is executed

The following example demonstrates the use of hide() and show() throughdurationParameters:

$("#hide-btn").click(function(){
　　$("p").hide(1000);
});
$("#show-btn").click(function(){
　　$("p").show(1000);
});

The following example uses hide() and show() to demonstrateCallbackParameters:

$("#hide-btn").click(function(){
　　$("div").hide(1000, function(){
　　　　alert("DIV is hidden");
　　});
});
$("#show-btn").click(function(){
　　$("div").show(1000, function(){
　　　　alert("DIV is displayed");
　　});
});

quickly hide all spans (in this example, words), in200 milliseconds to complete each animation:

$("button").click(function(){
　　$("span:last-child").hide("fast", function(){
$(this).prev().hide("fast", arguments.callee);
　　});
});

jQuery toggle() method

We can also usetoggle()The method toggles between hiding and showing HTML elements.

If the selected element is initially displayed, it will be hidden; if it is hidden, it will be displayed.

The following example hides and shows all<p>Toggle between elements:

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

toggle()The syntax of the method is as follows:

$(selector).toggle(duration, easing, callback);

toggle()The method accepts three optional parameters:

• duration　 -Determine the effect willDurationHow long. Possible values: 'slow', 'fast' or milliseconds

• easing -Indicates the easing function to be used for the transition. Possible values: 'swing', 'linear'

• callback-Function to be called after the specified method is executed

jQuery Effects Reference

For complete effect references, please visit ourjQuery Effects Reference Manual.