Metoda fadeIn

Metoda fadeIn afișează progresiv elementele ascunse, făcându-le opace. Elementele pot fi ascunse cu ajutorul metodei fadeOut, făcându-le transparente.

Sintaxă

Afișare în timpul specificat, 400ms implicit:

javascript.fadeIn(durată);

Timpul poate fi specificat nu doar în milisecunde, ci și prin cuvintele cheie slow (600ms) și fast (200ms), cu cât valoarea este mai mare, cu atât animația este mai lentă:

javascript.fadeIn('slow' sau 'fast');

Dacă nu specificați parametri - nu va exista animație, elementele vor fi afișate instantaneu:

javascript.fadeIn();

De asemenea, puteți transmite ca al doilea parametru o funcție de easing, și ca al treilea parametru o funcție callback - care se va executa după finalizarea animației. Ambii parametri sunt opționali:

javascript.fadeIn(durată, [funcția de easing], [funcția callback]);

Puteți transmite metodei diverse opțiuni, sub forma unui obiect JavaScript, care conține perechi cheie: valoare:

javascript.fadeIn(opțiuni);

Un astfel de obiect poate transmite următorii parametri și funcții - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Descrierea acestor parametri o puteți consulta pentru metoda animate. De exemplu, să setăm durata și funcția de easing:

javascript.fadeIn( {duration: 800, easing: easeInSine} );

Exemplu

În exemplul următor, la click pe butonul #hide elementul cu #test va fi ascuns cu ajutorul metodei fadeOut, iar la click pe butonul #show - va fi afișat, cu ajutorul fadeIn. De asemenea, vom seta viteza la 1000ms:

html<button id="hide">ascunde</button>
<button id="show">afișează</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000);
});

Exemplu

În exemplul următor, după finalizarea animației la afișarea elementului #test vom afișa un mesaj cu textul '!', iar la ascundere cu textul '?':

html<button id="hide">ascunde</button>
<button id="show">afișează</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Vedeți și