jQuery Fading módszerei.

$("....")     Szelektor.       Itt határozzuk meg, mely elemnél vagy elemeknél történjen az animáció.

fadeOut()                        Kiválasztott elem, teljes elhalványulása.

fadeIn()                           Felfedi az elhalványult elemet.

fadeToggle()                   Kiválasztott elem teljes elhalványulása, és visszaállítása.

fadeTo("slow", 0.15)        Láthatóság elhalványulása meghatározott sebességgel és értékre ( 0 és 1 között )
 
Metódusok zárójelei között, meghatározhatunk sebesség paramétert: "slow"(lassú),    "fast"(gyors),  vagy   milliseconds (idő).

fadeOut(); és fadeIn();

$(document).ready(function(){
// fényelnyelés.
    $("#button01").click(function(){
       $("#fad01").fadeOut();
    });
//  felfedés. 
    $("#button02").click(function(){
      $("#fad01").fadeIn();
    });
});

$(document).ready(function(){
// fényelnyelés "slow"(lassú)
    $("#button03").click(function(){
      $("#fad02").fadeOut("slow");
    });
//  felfedés.  "slow"(lassú)
    $("#button04").click(function(){
      $("#fad02").fadeIn("slow");
    });
});

$(document).ready(function(){
// fényelnyelés "fast"(gyors)
    $("#button05").click(function(){
      $("#fad03").fadeOut("fast");
    });
//  felfedés.  "fast"(gyors)
    $("#button06").click(function(){
      $("#fad03").fadeIn("fast");
    });
});

$(document).ready(function(){
// fényelnyelés milliseconds.
    $("#button07").click(function(){
      $("#fad04").fadeOut(3000);
    });
//  felfedés milliseconds. 
    $("#button08").click(function(){
      $("#fad04").fadeIn(3000);
    });
});

<div id="fad01">
Láthatósági teszt.
Elhalványulási sebesség, nincs meghatározva.

fadeOut(); Elnyelés.
fadeIn(); Felfedés.
</div>

<div id="fad02">
Láthatósági teszt.
Elhalványulási sebesség meghatározása: "slow"(lassú).

fadeOut("slow"); Elnyelés.
fadeIn("slow"); Felfedés.
</div>

<div id="fad03">
Láthatósági teszt.
Elhalványulási sebesség meghatározása: "fast"(gyors).

fadeOut("fast"); Elnyelés.
fadeIn("fast"); Felfedés.
</div>

<div id="fad04">
Láthatósági teszt.
Elhalványulási sebesség meghatározása: milliseconds.

fadeOut(3000); Elnyelés.
fadeIn(3000); Felfedés.
</div>

fadeToggle(); és fadeTo("v", x.x);

fadeToggle()
 Elhalványít-Felfed.

	$("#pid03").click(function(){
		$("#fad01").fadeToggle();
		$("#fad02").fadeToggle("slow");
		$("#fad03").fadeToggle("fast");
		$("#fad04").fadeToggle(3000);
	});

fadeTo() Fényelnyelés.
 Értéke: 0 és 1 között.

	$("#pid04").click(function(){
		$("#fad01").fadeTo("", 0.1);
		$("#fad02").fadeTo("slow", 0.15);
		$("#fad03").fadeTo("fast", 0.3);
		$("#fad04").fadeTo(3000, 0.5);
	});

fadeTo() Láthatóság
 visszaállítása.

	$("#pid05").click(function(){
		$("#fad01").fadeTo("", 0.99);
		$("#fad02").fadeTo("slow", 0.99);
		$("#fad03").fadeTo("fast", 0.99);
		$("#fad04").fadeTo(3000, 0.99);
	});

Következő programban, 3 fadeOut() példát láthatunk.

Teszteléshez engedélyezhetjük mindegyiket, vagy tiltsuk le azokat, melyekre nincs szükségünk.

<head>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>

<script>
$(document).ready(function(){
  // 1. fadeOut() totális fényelnyelés.
  $("#pid01").click(
                             function()
                                {
                                  $("#dv1").fadeOut();
                                  $("#dv2").fadeOut("slow");  // "slow"(lassú)   "fast"(gyors)
                                  $("#dv3").fadeOut(3000);
                                }
                        );

  // 2. fadeIn() fényelnyelés felfedése.
  $("#pid02").click( function(){
                                  $("#dv1").fadeIn();
                                  $("#dv2").fadeIn("slow");  // "slow"(lassú)   "fast"(gyors)
                                  $("#dv3").fadeIn(3000);
                            } );

  // 3. fadeToggle() Elhalványít-Felfed. 
  $("#pid03").click(function(){
        $("#dv1").fadeToggle();
        $("#dv2").fadeToggle("slow");  // "slow"(lassú)   "fast"(gyors)
        $("#dv3").fadeToggle(3000);
  });

  // 4. fadeTo() Láthatóság, fényelnyelés meghatározása. Értéke:  0 és 1 között.
  $("#pid04").click(function(){
        $("#dv1").fadeTo("slow", 0.15);
        $("#dv2").fadeTo("slow", 0.3);
        $("#dv3").fadeTo(3000, 0.5);
  });

  // 5. fadeTo() Láthatóság fényerejének visszaállítása.
  $("#pid05").click(function(){
        $("#dv1").fadeTo("slow", 0.99);
        $("#dv2").fadeTo("slow", 0.99);
        $("#dv3").fadeTo("slow", 0.99);
  });
  
});

</script>
</head>
<body>

<div id="dv1" style="width:80%; padding:15px; background-color:goldenrod;"> <p>Példa 1.</p> </div>
<div id="dv2" style="width:80%; padding:15px; background-color:orange;"> <p>Példa 2.</p> </div>
<div id="dv3" style="width:80%; padding:15px; background-color:goldenrod;"> <p>Példa 3.</p> </div>

<button id="pid01">1. Fényerővel elrejtés:<br /> fadeOut()</button>
<button id="pid02">2. Elem Felfedése.<br /> fadeIn().</button>
<button id="pid03">3. Elrejtés-Felfedés.<br /> fadeToggle().</button>
<button id="pid04">4. Fényerő beállítása.<br /> fadeTo("slow",0.xx).</button>
<button id="pid05">5. Fényerő visszaállítása.<br /> fadeTo("slow",0.9).</button>

</bodi>