Metoda fadeOut

Metoda fadeOut plynule skrývá prvky. Zobrazit prvky lze pomocí metody fadeIn, čímž je učiní neprůhlednými.

Syntaxe

Zobrazení po zadanou dobu, 400ms ve výchozím nastavení:

javascript.fadeOut(doba trvání);

Čas lze zadávat nejen v milisekundách, ale i klíčovými slovy slow (600ms) a fast (200ms), čím větší hodnota, tím pomalejší animace:

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

Pokud nezadáte parametry - animace nebude, prvky budou skryty okamžitě:

javascript.fadeOut();

Jako druhý parametr lze také předat funkci pro plynulost, a jako třetí callback funkci - spustí se po dokončení animace. Oba parametry jsou volitelné:

javascript.fadeOut(doba trvání, [funkce plynulosti], [callback funkce]);

Metodě lze předat různé volby, ve formě JavaScriptového objektu, obsahujícího dvojice klíč: hodnota:

javascript.fadeOut(možnosti);

Takový objekt může předávat následující parametry a funkce - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Popis těchto parametrů naleznete u metody animate. Například, nastavíme dobu trvání a funkci plynulosti:

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

Příklad

V následujícím příkladu po stisknutí tlačítka #hide bude prvek s #test skryt pomocí metody fadeOut, a po stisknutí tlačítka #show - zobrazen, pomocí fadeIn. Rychlost také nastavíme na 1000ms:

html<button id="hide">skrýt</button>
<button id="show">zobrazit</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);
});

Příklad

A v následujícím příkladu po dokončení animace při zobrazení prvku #test vypíšeme zprávu s textem '!', a při skrytí s textem '?':

html<button id="hide">skrýt</button>
<button id="show">zobrazit</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('?');
  });
});

Viz také