tapeta Moderního Webu

toggle

3D
2D

togle

Toggle, fadeToggle a slideToggle jsou další metody jQuery.
Skrývají/zobrazí vybraný element za použití jednoduché animace.

HTML:

<span>
  toggle
</span>
<div>
  TEXT TEXT
</div>

CSS:

span {
  color: blue;
  text-decoration: underline;
  margin: 5px; 
  cursor: pointer;  
}
div { 
  background: red; 
  width: 60px;
  height: 60px;
  margin: 10px; 
}

Script:

$(document).ready(function() {
  $("span").click(function() {
    $("div").toggle(800);
  });  
});

Číslo 800. Udává čas animace v milisekundách.

Prohlížeč:

toggle fadeToggle slideToggle
TEXT TEXT

Na tlačítka můžete klikat opakovaně.

Podobné metody:

  • hide(); fadeOut(); slideUp(); - element jen skryje
  • show(); fadeIn(); slideDown(); - jen skrytý element zobrazí
  • fadeTo(); - nastaví průhlednost

moderniweb.com © 2017