Мини-курс по jQuery для дизайнеров. Урок 2: выдвигающаяся панель и эффект исчезновения

Have a question? Ask in chat with AI!

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

[adsense]

Выдвигающаяся панель.

Я думаю вы часто сталкивались с такими панелями — вы нажимаете на ссылку и панель выезжает или прячется.
slidepanel jQuery
Когда элемент с классом "btn-slide" нажимается, панель с id="panel" выдвигается и CSS класс "btn-slide" переключается в CSS класс "active". Класс .active меняет положение фонового изображения (кнопка со стрелкой) используя CSS.
Ниже приведу полный текст кода функции:

$(document).ready(function(){
    $(".btn-slide").click(function(){
	  $("#panel").slideToggle("slow");
	  $(this).toggleClass("active");
	});
});

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

—>В начало

 

Эффект исчезновения.

Пример покажет вам как сделать эффект исчезновения какого-либо элемента при нажатии кнопки.
Когда <img class="delete"> нажат, он получает доступ к родительскому элементу <div class="pane"> и создает анимацию его медленного исчезновения используя свойство opacity=hide.
Вот полный текст функции:

$(document).ready(function(){

	$(".pane .delete").click(function(){
	  $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
	});

});

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

—>В начало

Если задумались над созданием интернет магазина или думаете продавать товар через сайт — обратите внимание на скрипт корзины jCart, автор которого Алексей Опанасенко aka Never Lex. Посмотреть на скрипт корзины товаров jCart можно на демо-странице

На этом наш второй урок из мини-курса по jQuery для дизайнеров подошел к концу. В следующем уроке мы рассмотрим эффект смещения и разберем создание меню типа аккордеон. А если вы ищите софт для Android и где скачать приложения для android бесплатно, то обязательно загляните на сайт soft4androide.ru — масса полезных и бесплатных программ.


12 комментариев для “0

  1. Уведомление: Мини-курс по jQuery для дизайнеров. | RusDigi.org Блог Гилязетдинова Руслана
  2. Уведомление: Мини-курс по jQuery для дизайнеров. Урок 2. | Grabr
    1. что за фенечки имеются ввиду?) я думал после написания n-ого количества статей о вп сделать этакий сборник рецептов)

  3. Уведомление: Мини-курс по jQuery для дизайнеров. Урок 3. Движение и меню аккордеон. | RusDigi.org Блог Гилязетдинова Руслана
  4. как  оформить код — если у меня на сайте несколько абзацев (типа вопросы-и-ответы) ?

    1. чисто теоретически пронумеровать id=panel и btn-slide классы и отслеживать номера при нажатии кнопки, чтобы номер кнопки совпадал с номером абзаца.

      на мой взгляд, лучше использовать готовые модули или плагины. т.к. для q&a систем их огромное множество. 

  5. Подскажите как сделать несколько таких блоков на однои странице??? Если не трудно с примером….

Добавить комментарий для Гилязетдинов Руслан Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Мини-курс по jQuery для дизайнеров
Следующая запись Раздача инвайтов Webice и обмен постовыми