1. jQuery hide() ans show()
Syntax-
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Hide() function with speed parameter:
$("button").click(function(){
$("p").hide(1000);
});
$("p").hide(1000);
});
2. jQuery toggle()
you can toggle between the hide() and show() methods with the toggle() method.
$("button").click(function(){
$("p").toggle();
});
$("p").toggle();
});
3. jQuery Fade Method
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
fadeOut() and fadeToggle() are same as above.
->fadeTo()-
$(selector).fadeTo(speed,opacity,callback);
The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).
The optional callback parameter is a function to be executed after the function completes.
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
4. jQuery slide Method
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
jQuery has the following slide methods:
a ) slideDown()
$("#flip").click(function(){
$("#panel").slideDown(); });
b) slideUp()
$("#flip").click(function(){
$("#panel").slideUp();
});
$("#panel").slideUp();
});
c) slideToggle()
$("#flip").click(function(){
$("#panel").slideToggle();
});
$("#panel").slideToggle();
});