Hide and show example... Selecting the buttons below will do exactly as they say. The "p" in the code below indicates what you're hiding and showing. The "p" indicates the p tag, this can also be used for div tags, heading tags, IDs, etc.
$(document).ready(function(){
$("#hide").click(function(){
$ ("p") .hide();
$("#show").click(function(){
$ ("p") .show();
You can also change the speed of how fast it hides or shows the object. By doing this, you create a faded effect. In the line of code below, inside the parentheses (with the "1000") is where you indicate the speed. The higher the number (in milliseconds), the slower the effect. The show effect is set to "5000" and it is remarkably slower.
$("#button1").click(function(){
$("#p2").hide(1000);
To use the same button to hide and show, you can use toggle.
$(document).ready(function(){
$("#toggle").click(function(){
$("#p3").toggle();
In this line of code below, you can see how each object has a separate speed in order to create a fade effect. "slow" or "fast" are acceptable syntaxes as well as numbers representing milliseconds.
$("#fadebutton").click(function(){
$("#fade1").fadeIn();
$("#fade2").fadeIn ("slow");
$("#fade3").fadeIn (3000);
The FadeOut() function works just like the FadeIn(). Only difference being the name of the function. Check out some of the code below to see.
$("#fade1").fadeOut(3000);
$("#fade2").fadeOut("slow");
$("#fade3").fadeOut();
To demonstrate both functions in effect, I combined them and added the toggle function. I did it untraditionally to create a reverse fade effect, as you will notice when clicking the button. There is a much easier way to use the toggle fade function as will be demonstrated in the next section.
var toggle1=0;
$(document).ready(function(){
$("#fadebutton").click(function(){
if (toggle1==0){
$("#fade1").fadeIn();
$("#fade2").fadeIn("slow");
$("#fade3").fadeIn(3000);
toggle1=1;
}
else{
$("#fade1").fadeOut(3000);
$("#fade2").fadeOut("slow");
$("#fade3").fadeOut();
toggle1=0;
Just as the other Fade functions, FadeToggle is exactly the same. Again the only difference is the name of the operation.
$(document).ready(function(){
$("fadetoggle").click(function(){
$("#ft1").fadeToggle();
$("#ft2").fadeToggle("slow");
$("#ft3").fadeToggle(3000);
The FadeTo() function allows you to fade an object to a specific opacity. Notice the syntax in the cod below, you can still choose a speed for which object fades to its opacity. The decimal numbers are the level of opacity for that object.
$(document).ready(function(){
$("#fadeto1").click(function(){
$("#fadetoopacity1").fadeTo("slow", 0.15);
$("#fadetoopacity2").fadeTo("slow", 0.4);
$("#fadetoopacity3").fadeTo("slow", 0.7);
$(document).ready(function(){
$("#slidedown").click(function(){
$("#slidedownpanel").slideDown("slow");
$(document).ready(function(){
$("#slideup").click(function(){
$("#slideuppanel").slideUp("1000");
$(document).ready(function(){
$("#slidetoggle").click(function(){
$("#slidetogglepanel").slideToggle("fast");