Мини-курс по jQuery для дизайнеров. Урок 3. Движение и меню аккордеон.

Сегодня третий урок из мини-курса по jQuery для дизайнеров, где мы постигаем основы использования библиотеки jQuery и JavaScript. В предыдущем уроке мы научились создавать с помощью jQuery выдвигающуюся панель и эффект исчезновения. В этом уроке мы будем сначала экспериментировать с движением и изменением размера элемента, а чуть позже сделаем меню с эффектом аккордеона.

[adsense]

Движение и изменение элемента

Давайте посмотрим как легко реализовать движение и изменение элемента с помощью jQuery. Всего в несколько строк кода я могу заставить квадрат двигаться по кругу, менять размер и прозрачность на ходу.

Строка 1 : когда ссылка <a class="run"> нажата
Строка 2 : двигать <div id="box"> влево, пока он не достигнет 400px со скоростью 1200 (миллисекунды), параметр непрозрачности = 0,1,
Строка 3 : далее непрозрачность = 0,4, движение сверху вниз на 160px, высоту и ширину квадрата изменить до 20px, скорость — медленная
Строка 4 : затем непрозрачность = 1, движение влево до нуля, высота и ширина изменяются до 100px, скоростью — медленно
Строка 5 : движение наверх до 0px, со скоростью — быстро
Строка 6 : далее slideUp, по умолчанию скорость — нормальная
Строка 7 : эффект slideDown, со скоростью — медленно

А вот собственно и сам код:

$(document).ready(function(){

	$(".run").click(function(){

	  $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
	  .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
	  .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
	  .animate({top: "0"}, "fast")
	  .slideUp()
	  .slideDown("slow")
	  return false;

	});

});

Посмотреть демо

Меню с эффектом аккордеон

Первая строка добавит CSS класс active к первому элементу <h3>. Вторая строка скроет все элементы <p>, которые не являются первыми внутри блока <div class="accordion">.
Когда происходит нажатие на элемент <h3>, он медленно показывает следующий абзац, а себе присваивает класс active.
Весь код можно увидеть тут:

$(document).ready(function(){

	$(".accordion h3:first").addClass("active");
	$(".accordion p:not(:first)").hide();


	$(".accordion h3").click(function(){

	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");

	});

});

Посмотреть демо

Тема Вунш на своем блоге осмеивает очередную программу для взлома контакта.

Всем удачного дня!