Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

Анимационни ефекти в jQuery

В библиотеката jQuery са представени няколко техники за добавяне на анимация към уеб страницата. Те включват стандартна анимация, както и възможност за разработване на сложни ефекти. Потребителският интерфейс на jQuery разширява доста функционалността на вградените в jQuery ефекти. Този интерфейс прави възможно анимирането на цветове и различни видове преходи от едно състояние в друго. Освен това, съществува пълен комплект от потребителски ефекти, които се използват за показване, скриване на елементи или добавяне на текст или изображения.

jQuery метод animate()

Методът animate() на jQuery се използва за създаване на потребителски анимации. Използваните в този метод параметри водят до анимиране на CSS свойствата. Синтаксис:

		$(selector).animate({params},speed,callback);

Параметърът за скорост (speed) определя продължителността на ефекта, който може да приема стойностите "slow", "fast" или число в милисекунди. Анимират се числени стойности, с изключение на указаните изрично. Повечето стойности, които не са числени не могат да се анимират с помощта на този метод. Например, стойностите width, height или left могат да се анимират, но background-color не може, освен с използването на плагина jQuery.Color().
Когато се анимира положението на html елемент е необходимо да се зададе CSS свойство за положение. Зададеното по подразбиране е position:static, при което html елемента не може да бъде придвижван. Затова, когато ще се придвижва даден елемент първо трябва да се зададе за неговото форматирането едно от CSS свойствата за положение fixed, relative или absolute.
Стойностите на свойствата се приемат за пиксели, освен ако не е указано друго. Освен това, всяко свойство може да приема изрази като 'show', 'hide' и 'toggle'. Това позволява скриване и показване на анимация, като се отчита вида на показване на елемента. Анимираните свойства могат да бъдат относителни. Когато стойността се подава с водещи символи += или -= то крайната стойност се изчислява чрез добавяне/изваждане на дадено число към/от текущата стойност на свойството.
Когато е зададена функция callback тя се задейства еднократно при завършване на анимацията. Това може да баде полезно за последователното показване на анимации в група. Функцията не препраща аргументи, а е присвоена към определен елемент на DOM, който се анимира. Когато се анимират повече елементи функцията се задейства поотделно за всеки съответен елемент, а не веднъж за цялата група от анимации.


По-долу е даден пример с две последователни анимации за получаване на пълния размер и плътност на изибражение и обратно. Анимиран е също така и текста. В двете анимации са използвани callback функции (виж примера в браузъра):

	<!DOCTYPE html>
	<html>
	  <head>
		<script src="/js/jquery.js"></script>
		<style>
			img {
			width:50px;
			height:50px;
			opacity:0.3;
			border:5px solid #FD0002;
			}
			.animaend{
			font-size:18px;
			color:#FD0002;
			}
		</style>
	  </head>
	  <body>
		<div align="center">
			<div id="start-text" style="color:#025BDA;font-size:18px;margin-bottom:20px;"><strong>Кликнете ...</strong></div>
			<img id="block" src="/colors.jpg" alt="" style="cursor:pointer;">
			<div id="restart" style="color:#025BDA;font-size:18px;margin-bottom:20px;display:none;cursor:pointer;">
			<strong>Анимацията ...</strong></div>
		</div>
		<script>
			$("#block").click(function(){
				$("#block").animate({
					width: "490px",height:"480px",opacity: 1,borderWidth: "10px"}, 1500, 
					//callback
					function() {
					$("#start-text").hide(1000),
					$("#restart").show(1000);}
				)
			});
			
			$("#restart").click(function(){
				$("#start-text").show(1500), 
				$("#block").animate({
					width: "50px",height:"50px",opacity: 0.3,borderWidth: "5px"}, 1500,
					//callback
					function() {
					$("#restart").hide();}
				)
			});
		</script>
	</body>
	</html>

В следващият пример е показано анимиране на контейнер от тип <div> и съдържащият се в него текст. Анимира се и нов бутон за възстановяване на началното състояние. Анимирането на текста и бутона се осъществява с callback функция (виж примера в браузъра):

	<!DOCTYPE html>
	<html>
	  <head>
		<style>
			#container {
				background-color:#cccccc;
				width:200px;
				height:90px;
				text-align:center;
				border:4px solid #bbbbbb;
				margin:3px;
				font-size:14px;
			}
		</style>
		<script src="/js/jquery.js"></script>
	  </head>

	  <body>
		<button id="animate1" style="cursor:pointer;">Анимиране</button>
		<button id="animate2" style="display:none;margin-left:200px;cursor:pointer;" >Възстановяване</button>
		<div id="container">
			<p id="start">
				За увеличаване размера на контейнера и буквите се натиска бутон <<Анимиране>>.</p>
			<p id="reset" style="display:none">
				За възстановяване на началното състояние се натиска бутон <<Възстановяване>></p>
		</div>

		<script>
		$("#animate1").click(function(){
			$("#container").animate({width:"400px",height:"250px",fontSize:"35px",borderWidth:"15px"},500,'linear',
			//callback
			function() {$("#animate2").show(500),
						$("p#start").hide(),
						$("p#reset").show();
			})
		});
		$("#animate2").click(function(){
			$("div").css({width:"", height:"",fontSize:"",borderWidth:""}),
			$("#animate2").hide(),
			$("p#start").show(),
			$("p#reset").hide();
		});
		</script>
	  </body>
	</html>

В горната програма е използван ефект за преход от едно състояние в следващо, който се нарича easing. В случаят е приложен ефект linear. За справка на възможните ефекти Вижте оригиналните демонстрационни ефекти на потребителския интерфейс в jQuery. За да се приложат повечето от тях е необходимо да се използва jquery-ui.js.

jQuery метод animate() с предварително определени стойности

При прилагане на метода animate() могат да се изполват стойности като "show", "hide" или "toggle". В примера по-долу е използван като стойност ефекта "toggle" (виж примера в браузъра):

	<!DOCTYPE html>
	<html>
	  <head>
		<script src="/../js/jquery.js"></script>
		<script> 
			$(document).ready(function(){
			  $("p.txt").click(function(){
				$("div#t").animate({
				  height:'toggle'		  
				});
			  });
			});
		</script> 
		<style>
			div {
				display:none;
				margin-left:auto;
				margin-right:auto;
			}
		</style>
	  </head>
	 
	  <body>
		<p class="txt" style="text-align:center;cursor:pointer;">Кликнете върху текста за начало на двупосочна анимация</p>
		<div id="t" style="background:#FFCC99;height:150px;width:400px;text-align:justify;border-radius: 10px;">
		<div id="t" style="padding:15px;">Почти всички css свойства в jQuery могат да бъдат манипулирани с метода animate().
		Трябва да се отбележи, че в jQuery имената на свойствата се записват слято, като второто е с главна буква.
		Например padding-left се записва като paddingLeft, margin-right като marginRight и т.н.
		</div>
		</div>
	</body>
	</html>

jQuery метод animate() с относителни стойности

При метода animate() е възможно задаването на относителни стойности към текущите за определен html елемент. Това се осъществява чрез поставяне на += или -= пред управляваната стойност. В примера по-долу са зададени относителни стойности за последователно анмиране на позицията по Х и У, широчината и височина на фигурата (виж примера в браузъра):

	<!DOCTYPE html>
	<html>
	  <head>
		<script src="/../js/jquery.js"></script>
		<script> 
		$(document).ready(function(){
		  $("button").click(function(){
			$("div").animate({
			  left:'+=50px',
			  top:'+=50px',
			  height:'+=50px',
			  width:'+=50px'
			});
		  });
		});
		</script> 
	  </head>
	   <body>
		<button>Натисни за следваща анимация</button>
		<p>Всички html елементи по подразбиране са със зададено статично положение. За да може да се променя положението им е необходимо css свойството за положение да се зададе като relative, fixed или absolute!</p>
		<div style="background:#FFCC99;height:10px;width:10px;position:absolute;">
		</div>
	  </body>
	</html>

jQuery метод animate() с последователна функционалност

Когато в jQuery съществуват няколко последователни повиквания на метода animate() то те се изпълняват едно след друго. По-долу е даден пример за последователно анимиране на размера и плътността на изображение (виж примера в браузъра):

<!DOCTYPE html>
<html>
  <head>
	<script src="/../js/jquery.js"></script>
	<script> 
	$(document).ready(function(){
	  $("button").click(function(){
		var pic=$("img");
		pic.animate({height:'163px',opacity:'0.2'},"slow");
		pic.animate({width:'326px',opacity:'0.4'},"slow");
		pic.animate({height:'323px',opacity:'0.6'},"slow");
		pic.animate({width:'654px',opacity:'1'},"slow");
	  $("button").hide();
	  $("p#txt").hide();		 
	  });
	});
	</script> 
  </head>
 
  <body>
	<button style="cursor:pointer;">Начало на анимацията</button>
	<p id="txt">Всички html елементи по подразбиране са със зададено статично положение. За да може да се променя положението им е необходимо css свойството за положение да се зададе като relative, fixed или absolute!</p>
	<img src="/../bg_rect.jpg" style="height:81px;width:81px;position:absolute;opacity:0.2;">
	</div>
  </body>
</html>

		Настоящото ръководство е съставено
		от Никола Меранзов
		http://dimarini.net
		dimarini@gmail.com