Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

Fade functie

Met JQuery kun je allerlei leuke effecten maken voor je site. Een effect is het laten verschijnen en verdwijnen van stukken tekst op je site. De functie fade is daar uitermate nuttig voor. Hoe werkt de functie?

Fade functie

JQuery heeft een aantal functies om het fade effect te krijgen:

  1. fadeIn();
  2. fadeOut();
  3. fadeToggle(); en
  4. fadeTo();

Een voorbeeld van deze functie in actie is:

<!DOCTYPE html>
< html> <head>
< script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script> <script>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).fadeIn(); });
});
< /script>
< /head> <body>

<p style=”display: none”>Laat de tekst verschijnen via de functie fadeIn();</p>
< button>Laat de tekst verschijnen</button>
</body> </html>

In dit voorbeeld heb je eerst een verborgen stuk tekst aangemaakt. Dit kun je heel simpel bereiken door de style van de paragraaf tag op display: none te zetten. Daarmee verberg je het stuk tekst op het scherm.

Vervolgens heb je een stuk code nodig in JQuery waarmee je de tekst laat verschijnen op het scherm van de bezoeker.

Je kunt zelf nog de snelheid van het verschijnen van de tekst inregelen. Door de juiste parameter te gebruiken, bepaal je de snelheid waarmee de tekst op het scherm komt te staan. Je kunt slow, fast of millisecondes opnemen als values.

$(“p”).fadeIn(“slow”);
$(“p”).fadeIn(“fast”);
$(“p”).fadeIn(1500);

Fade Out functie

Het omgekeerde effect van iets laten verschijnen op het scherm is iets laten verdwijnen van het scherm. Daarvoor heeft JQuery natuurlijk een oplossing. De functie fadeOut(); doet het omgekeerde van de functie fadeIn(); zoals hiervoor omschreven.

<!DOCTYPE html>
< html> <head>
< script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script> <script>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).fadeOut(); });
});
< /script>
< /head> <body>

<p>Laat de tekst verdwijnen via de functie in JQuery van  fadeIn();</p>
< button>Laat de tekst verdwijnen</button> </body> </html>

Op dezelfde manier als bij fadeIn kun je ook hier de snelheid van het verdwijnen van de tekst zelf regelen. Via slow, fast of een getal in millisecondes regel je zelf de snelheid van de functie.