Efekty

Můžeme ovládat zobrazování a pohyb vybraných objektů Efekty se vykonají pokaždé, kdy jsou spuštěné – pokud je zrovna vykonáván jiný efekt, další se zařadí do pořadí a efekty jsou vykonány postupně v řadě za sebou.

Určujeme u nich délku trvání animace (v milisekundách)

Hide – schová
Show – zobrazí
Toggle – zajede mimo obrazovku (schová objekt pokud je zobrazený, zobrazí ho, pokud je schovaný)
fadeOut – zprůhlední
fadeIn – zneprůhlední – vrátí zpět
fadeTo – zprůhlední a zase vrátí zpět – určujeme i jak dlouhou dobu má objekt zůstat průhledný

příklad:

$("#odstavec").toggle(500));

Metoda Animate

I kaskádové styly se dají měnit efekty, k tomu slouží efekt Animate

Má tyto parametry:

funkce při spuštění animace (povinný parametr)
doba trvání (povinný parametr)
lineární zrychlení
funkce po dokončení animace

příklad:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Karel jede na kole</title>
<script src="jquery-1.10.2.min.js"></script>
<script>
	 $(document).ready(function(){
	 	$("#odstavec").animate({ width: "600px", }, 500 );
	 	
	})
	
</script>
<style>
	#odstavec {
	width:200px;
	background-color:gray;
	
	}
</style>
</head>

<body>
	<div id="odstavec">Karel jede na kole.</div>
</body>
</html>

Příklad s vnořenou funkcí po dokončení (vytvoří vyskakovací okno s nápisem „Hotovo“):

	 $(document).ready(function(){
	 	$("div").animate({
  			height: 500,
 			 width: 200,
 			 opacity: 0.5
			}, 1000, "linear", function() {
  			alert( "Hotovo" );
			});	 	
	})

Události

Dokáží zachytit určité chování objektů.

Události se zapisují takto:

 $(element).událost(function(){
	 co se má vykonat, když se událost stane	 	
	})

Typy událostí:

ready – dokument (nebo objekt) se načetl

příklad:

   $(document).ready(function(){
             /*co se má vykonat*/
   })

click – kliknutí myši

příklad:

   $("#tlacitko").click(function(){
       /* co se má vykonat */  })

Jiný typ zápisu události pomocí „bind“:

      $("#tlacitko").bind("click", function(){
      /*co se má vykonat*/
      })

Můžeme adresovat objekt pomocí „this“. příklad:

      $("p").bind("click", function(){
      $( this ).toggle(200);
      })

Další typy událostí:

dblclick – double click, dvojklik
mouseenter – nájezd myši
mouseleave – sjezd myši
hover – registruje myš nad objektem a její sjetí
mousedown – stisknutí myši
mousemove – pohyb myši nad objektem
mouseout – sjetí myši z objektu
mouseover – myš nad objektem

Jquery II

Efekty

Metoda Animate

Události