Mbinu ya fadeIn
Mbinu fadeIn inaonyesha vipengele vilivyofichika
kwa utulivu, huku ikivifanya visiwe na uwazi. Kuficha
vipengele kunaweza kufanyika kwa kutumia mbinu
fadeOut,
huku ikivifanya viwe na uwazi.
Syntax
Kuonyesha kwa muda uliowekwa,
400ms kwa chaguo-msingi:
.fadeIn(muda);
Muda unaweza kuwekwa sio tu kwa millisekunde,
lakini pia kwa maneno muhimu slow (600ms)
na fast (200ms), thamani kubwa zaidi,
huonyesha mwendo wa polepole zaidi:
.fadeIn('slow' au 'fast');
Ikiwa hautaweka vigezo - hautakuwa na uhuishaji, vipengele vitaonyeshwa mara moja:
.fadeIn();
Pia unaweza kupeparameta ya pili kupeana kitendakazi cha utulivu, na parameta ya tatu kitendakazi-callback - itafanya kazi baada ya kukamilika kwa uhuishaji. Parameta zote mbili si za lazima:
.fadeIn(muda, [kitendakazi cha utulivu], [kitendakazi-callback]);
Unaweza kupeleka kwa mbinu chaguzi mbalimbali, kwa mfumo wa kitu cha JavaScript, kilichokuwa na jozi ufunguo: thamani:
.fadeIn(chaguzi);
Kitu kama hicho kinaweza kupeleka vigezo vifuatavyo
na vitendakazi - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Maelezo
ya vigezo hivi unaweza kuyaangalia kwa mbinu
animate. Kwa mfano,
tutaweka muda na kitendakazi cha utulivu:
.fadeIn( {duration: 800, easing: easeInSine} );
Mfano
Katika mfano ufuatao wakati wa kubonyeza kitufe
#hide kipengele chenye #test kitakuwa
kikifichika kwa kutumia mbinu fadeOut,
na kwenye kitufe #show - kuonyeshwa, kwa
kutumia fadeIn. Pia tutaweka
kasi kwa 1000ms:
<button id="hide">hide</button>
<button id="show">show</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 uhuishaji wakati wa kuonyesha kipengele #test sisi
tutaonyesha ujumbe
na maandishi '!', na wakati wa kuficha
na maandishi '?':
<button id="hide">hide</button>
<button id="show">show</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('?');
});
});
