Skripta OVI

JQuery – 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 skrz 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" );
			});	 	
	})

admin