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:
.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ă:
.fadeIn('slow' sau 'fast');
Dacă nu specificați parametri - nu va exista animație, elementele vor fi afișate instantaneu:
.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:
.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:
.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:
.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:
<button id="hide">ascunde</button>
<button id="show">afișează</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#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 '?':
<button id="hide">ascunde</button>
<button id="show">afișează</button>
<div id="test"></div>
#test {
width: 200px;
height: 200px;
background: green;
color: white;
margin-top: 10px;
}
$('#show').on('click', function() {
$('#test').fadeIn(1000, function() {
alert('!');
});
});
$('#hide').on('click', function() {
$('#test').fadeOut(1000, function() {
alert('?');
});
});
