Mbinu ya fadeOut
Mbinu fadeOut huificha kwa poleni
vipengele. Vipengele vinaweza kuonyeshwa kwa kutumia mbinu ya
fadeIn,
na kuvifanya viwe visioonekana.
Syntax
Kuonyesha kwa muda uliowekwa,
400ms kwa chaguo-msingi:
.fadeOut(muda);
Muda unaweza kutajwa sio tu kwa millisekunde,
lakini pia kwa maneno muhimu slow (600ms)
na fast (200ms), thamani kubwa zaidi,
inamaanisha mwendo wa polepole zaidi wa animasyon:
.fadeOut('slow' au 'fast');
Ikiwa vigezo havitatajwa - hakuna animasyon, vipengele vitafichika mara moja:
.fadeOut();
Pia unaweza kupeana kigezo cha pili kitendakazi cha urahisi, na kigezo cha tatu cha kitendakazi cha callback - kitakachofanya kazi baada ya kukamilika kwa animasyon. Vigezo vyote viwili sio lazima:
.fadeOut(muda, [kitendakazi cha urahisi], [kitendakazi cha callback]);
Unaweza kupeata mbinu chaguzi mbalimbali, katika mfumo wa kitu cha JavaScript, kilichokuwa na jozi ufunguo: thamani:
.fadeOut(chaguzi);
Kitu kama hicho kinaweza kupeana vigezo vifuatavyo
na vitendakazi - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Maelezo
ya vigezo hivi unaweza kuyaona kwa mbinu ya
animate. Kwa mfano,
tutaweka muda na kitendakazi cha urahisi:
.fadeOut( {duration: 800, easing: easeInSine} );
Mfano
Katika mfano ufuatao wakati kubonyeza kitufe
#hide kipengele chenye #test kitakuwa
kinafichwa kwa kutumia mbinu ya fadeOut,
na kwenye kitufe #show - kuonyeshwa, kwa
kutumia fadeIn. Pia tutaweka
kasi kwa 1000ms:
<button id="hide">ficha</button>
<button id="show">onyesha</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);
});
Mfano
Na katika mfano ufuatao baada ya kumalizika
kwa animasyon wakati wa kuonyesha kipengele #test sisi
tutaonyesha ujumbe
na maandishi '!', na wakati wa kuficha
na maandishi '?':
<button id="hide">ficha</button>
<button id="show">onyesha</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('?');
});
});
