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:

javascript.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:

javascript.fadeOut('slow' au 'fast');

Ikiwa vigezo havitatajwa - hakuna animasyon, vipengele vitafichika mara moja:

javascript.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:

javascript.fadeOut(muda, [kitendakazi cha urahisi], [kitendakazi cha callback]);

Unaweza kupeata mbinu chaguzi mbalimbali, katika mfumo wa kitu cha JavaScript, kilichokuwa na jozi ufunguo: thamani:

javascript.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:

javascript.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:

html<button id="hide">ficha</button>
<button id="show">onyesha</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);
});

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 '?':

html<button id="hide">ficha</button>
<button id="show">onyesha</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('?');
  });
});

Angalia pia