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

Slide ефекти в jQuery

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


jQuery ефекти slideDown() и slideUp() и slideToggle()

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

<!DOCTYPE html>
<html>
  <head>
	<script src="/js/jquery.js"></script>
	<script> 
	$(document).ready(function(){
	  $("#open-text").click(function(){
		$("#ud-text").slideDown("slow");
	  });
	  $("#close-text").click(function(){
		$("#ud-text").slideUp("slow");
		});	  
	  $("#slide-text").click(function(){
		$("#ud-text").slideToggle("slow");
	  });
		});
	</script>
	
	<style type="text/css"> 
		.text-box {
			width:400px;
			height:50px;
		}
		#close-text,#open-text, #slide-text  {
			text-align:center;
			background-color:lightgreen;
			border:solid 2px green;
		}
		#ud-text {
			padding:50px;
			background-color:#FF443F;
			border:solid 4px #DF0500;
			text-align:center;
			color:#fff;
			font-size:20px;
			font-weignt:bold;
		}
	</style>
  </head>
  <body>
  <div align="center">
	<div id="slide-text" class="text-box" style="cursor:pointer;">Кликни за смяна състоянието на червения сектор <br />slideToggle()</div>
	<div id="close-text" class="text-box" style="cursor:pointer;">Кликни скриване на червения сектор <br />slideUp()</div>
	<div id="open-text" class="text-box" style="cursor:pointer;">Кликни за показване на червения сектор <br />slideDown()</div>
  </div>
  <br />
  <div align="center">
	<div id="ud-text" style="width:300px;">ТУК СЕ ЗАПИСВА ДОПЪЛНИТЕЛЕН ТЕКСТ!</div>
  </div>

  </body>
</html>