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

Основни ефекти в jQuery

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


jQuery ефекти hide() и show() и toggle()

С помощта на jQuery могат да се скриват и показват HTML елементи с методите hide() и show(), както и да се превключват тези състояния с метода toggle(). Тези методи работят и без аргументи. Като аргумент може да се зададе продължителност на прехода при анимацията чрез текст (slow,fast) или число (стойност в ms). Първоначално зададената стойност е 400 ms. По-долу е даден пример за използване на трите ефекта (виж примера в браузъра):


	<!DOCTYPE html>
	<html>
	  <head>
		<style>
			.bckgr { background:#6495ED; padding:3px; width:450px;}
			.bckgr1 { background:#FFE87C; padding:3px; width:450px;}
			.bckgr2 { background:#EDE275; padding:3px; width:450px;}
			.bckgr3 { background:#EDDA74; padding:3px; width:450px;}
			.textborder {border: 1px solid #000000;}
		</style>
		<script src="/js/jquery.js"></script>
		<script>
			$(document).ready(function(){
			  $("#hide").click(function(){
				$("p").hide(2000);
			  });
			  $("#show").click(function(){
				$("p").show(2000);
			  });
			});
			$(document).ready(function(){
			  $("#toggle").click(function(){
				$("p").toggle(2000);
			  });
			});
		</script>
	  </head>
	  <body>
	   <div align="center">
		<div class="bckgr">
			<table width="100%">
			  <tr>
				<td align="center"><button id="hide">Скрий текста</button></td>
				<td align="center"><button id="show">Покажи текста</button></td>
				<td align="center"><button id="toggle">Превключи</button></td>
			  </tr>
			</table>
		</div>

		<p class="bckgr1">За да изчезне текстът натиснете бутона <span class="textborder"> Скрий текста </span></p>
		<p class="bckgr2">За да се покаже отново натиснете бутона <span class="textborder"> Покажи текста </span></p>
		<p class="bckgr3">Когато натиснете бутона <span class="textborder"> Превключи </span> състоянието на текста<br />
						  се променя на противоположното от настоящето.</p>
	   </div>  
	  </body>
	</html>

jQuery ефекти Fading

С помощта на jQuery определени елементи могат да се показват чрез метода fadeIn() или скриват чрез метода fadeOut(), както и да се преминава от едното състояние в другото чрез метода fadeToggle(). Като аргумент може да се зададе продължителност на прехода чрез текст (slow,fast) или число (стойност в ms). Първоначално зададената стойност е 400 ms. Методът fadeTo() позволява регулиране на плътността на цвета със стойности от 0 до 1. По-долу е даден пример за използване на четирите ефекта (виж примера в браузъра):


	<!DOCTYPE html>
	<html>
	  <head>
		<style>
			.bckgr { background:#6495ED; padding:3px; width:450px;}
			.bckgr1 { background:#FFE87C; padding:3px; width:450px;}
			.bckgr2 { background:#EDE275; padding:3px; width:450px;}
			.bckgr3 { background:#EDDA74; padding:3px; width:450px;}
			.textborder {border: 1px solid #000000;}
		</style>
		<script src="/js/jquery.js"></script>
		<script>
		$(document).ready(function(){
		  $("#fadein").click(function(){
			$("#box1").fadeIn("slow").fadeTo("",1);
			$("#box2").fadeIn("fast").fadeTo("",1);
			$("#box3").fadeIn("400").fadeTo("",1);
		  });
		  $("#fadeout").click(function(){
			$("#box1").fadeOut();
			$("#box2").fadeOut();
			$("#box3").fadeOut();
		  });
		  $("#fadetoggle").click(function(){
			$("#box1").fadeToggle().fadeTo("",1);
			$("#box2").fadeToggle("slow").fadeTo("",1);
			$("#box3").fadeToggle().fadeTo("",1);
		  });
			$("#fadeto").click(function(){
			$("#box1").fadeTo("slow",0.50);
			$("#box2").fadeTo("slow",0.25);
			$("#box3").fadeTo("slow",0.2);
	  });
		});
		</script>
	  </head>
	  <body>
	   <div align="center">
		<div class="bckgr">
			<table width="100%">
			  <tr>
				<td align="center"><button id="fadeout">Скриване</button></td>
				<td align="center"><button id="fadein">Появяване</button></td>
				<td align="center"><button id="fadetoggle">Преход</button></td>
				<td align="center"><button id="fadeto">Яркост</button></td>		
			  </tr>
			</table>
		</div>
		<p class="bckgr1">За да изчезнат каретата натиснете бутона <span class="textborder"> Скриване  </span></p>
		<p class="bckgr2">За да се покажат каретата отново натиснете бутона <span class="textborder"> Появяване  </span></p>
		<p class="bckgr3">За превключване на състоянието натиснете бутона <span class="textborder"> Преход </span>  </p>
		<p class="bckgr4">За намаляване на плътността натиснете бутона <span class="textborder"> Яркост </span>  </p>
			<table>
			  <tr margin-left="0px">
				<td id="box1" style="width:150px;height:80px;background-color:#488AC7;"></td>
				<td id="box2" style="width:150px;height:80px;background-color:#659EC7;"></td>
				<td id="box3" style="width:150px;height:80px;background-color:#95B9C7;"></td>	
			  </tr>
			</table>
		</div> 
	</body>
	</html>