jQuery hide and show effect implementation_jquery

Example

jQuery hide()

Simple jQuery hide() method demonstration.

jQuery hide()

Another hide() instance. Demonstrates how to hide text.

jQuery hide() and show()

With jQuery, you can hide and show HTML elements using the hide() and show() methods:

Example

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

Grammar:

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

The optional speed parameter specifies the speed of hiding/showing, and can take the following values: "slow", "fast" or milliseconds.

The optional callback parameter is the name of the function to be executed after hiding or showing is completed.

The following example demonstrates the hide() method with the speed parameter:

Example

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

jQuery toggle()

With jQuery, you can use the toggle() method to toggle the hide() and show() methods.

Show hidden elements and hide displayed elements:

Example

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

Grammar:

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

The optional speed parameter specifies the speed of hiding/showing, and can take the following values: "slow", "fast" or milliseconds.

The optional callback parameter is the name of the function to be executed after the toggle() method completes.