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

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

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

Я думаю вы часто сталкивались с такими панелями — вы нажимаете на ссылку и панель выезжает или прячется.
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 — масса полезных и бесплатных программ.



Запись опубликована в рубрике JavaScript с метками , , , . Добавьте в закладки постоянную ссылку.

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

  1. Уведомление: Мини-курс по jQuery для дизайнеров. | RusDigi.org Блог Гилязетдинова Руслана

  2. Уведомление: Мини-курс по jQuery для дизайнеров. Урок 2. | Grabr

  3. artoha говорит:

    Уфф.
    Люблю такие бложики.
    Дельно, и по делу.

  4. artoha говорит:

    Кстати, сделай цикл статей на тему всяких фенечек для wp.

    • Гилязетдинов Руслан говорит:

      что за фенечки имеются ввиду?) я думал после написания n-ого количества статей о вп сделать этакий сборник рецептов)

  5. Уведомление: Мини-курс по jQuery для дизайнеров. Урок 3. Движение и меню аккордеон. | RusDigi.org Блог Гилязетдинова Руслана

  6. Прохожий говорит:

    А в IE9 панель не работает. 

    • Гилязетдинов Руслан говорит:

      в IE9 в режиме совместимости должна работать 

  7. evgeniy gribkov говорит:

    как  оформить код — если у меня на сайте несколько абзацев (типа вопросы-и-ответы) ?

    • Гилязетдинов Руслан говорит:

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

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

  8. Shaman_le говорит:

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

Добавить комментарий

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