Главная » Создание сайтов » Программирование » jQuery эффекты на примерах

jQuery эффекты на примерах

jQuery эффекты на примерах
В предыдущей статье мы узнали о том, как пользоваться объектами. Теперь мы разберем некоторые эффекты, которые дает нам jQuery.

1. Выдвижная панель

Начнем с одного из самых простых примеров: Slide panel. Когда-то давно у нас был показан пример ее реализации. Однако теперь, мы рассмотрим этот пример подробнее.

В начале создаем html код:

Slide Panel


Добавляем css стили:

#panel {background: #754c24;height: 200px;display: none;}
.slide {margin: 0;padding: 0;border-top: solid 4px #422410; background: url(files/slid.gif) no-repeat center top;}
.btn-slide {
background: url(files/ar.gif) no-repeat right -50px;
text-align: center;color: #fff;
width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;
display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;
text-decoration: none;}
.active {background-position: right 12px;}

Создаем оболочку для нашего кода:
$(document).ready(function(){
});

Панелька будет выдвигать при клике на объект с классом btn-slide.
$(document).ready(function(){
$(".btn-slide").click(function(){
});
});

Привязываем к объекту определенный effect. В данном случае мы будем использовать slideToggle (скорость: «slow») и toggleClass.
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});

Если #panel имеет display:none;, то этот объект плавно выползет вниз. Если же display:block;, то объект плавно поднимется вверх и исчезнет.

Строчка «$(this)» озночает, что действие будет происходить с объектом на который кликаем «.btn-click». А toggleClass добавляет или убирает определенный класс. В нашем случае — это active.

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

Html оболочка:

Блок

Текст внутри блока

Удалить

Когда мы кликаем по тексту «Удалить«, будет найден родительский элемент «<div class=»pane»>», и его прозрачность будет медленно изменяться от «opacity= 1.0» до «opacity=hide» со скоростью «slow»:

$(document).ready(function(){
$(".pane .delete").click(function(){
$(this).parents(".pane").fadeOut("slow");
});
});

Еще один хороший эффект.

Весь мануал по эффектам вы сможете найти в документации jQuery.

Сегодня мы рассмотрели два примера реализации эффектов на jQuery. Выползающую панель и плавное исчезновение. Два хороших примера для освоения.

С уважением, Vasilenko Ivan!

Комментарии — 24 комментария

  1. #9651 Зареслав в 14:12, 6 мая 2010:

    Ответить | Цитировать

    При включённом sef (OpenSEF) на Joomla выдвижная панель неработает.
    При выключенном sef ссылка <a href=»#» выглядит как http://сайт.ру/# и спойлер открывается
    а при включённом sef — http://сайт.ру/страница.html/# то есть к ссылке добавляется «страница.html» и спойлер неработает.
    Скажите пожалуйста как решить?

  2. Зареслав, не совсем понятна ваша проблема. Опишите ее, пожалуйста, более подробно.

  3. #9664 Зареслав в 18:26, 11 мая 2010:

    Ответить | Цитировать

    Вообщем тут проблема именно в СКО (дружественных ссылка) Joomla 1.0:
    если включить в админке Joomla дружественных ссылок — SEO, ссылки становятся типа /content/blogcategory/35/75/ вместо стандартных /index.php?option=com_content&view=article&id=23 и страницу при этом подбрасывает вверх,
    то есть ссылка на спойлер в jquery изначально имеет вид <a href=»#» и при наведении отображается так — http://site.ru/#, спойлер работает нормально — выдвигается панель.
    Но стоит в админке включить SEO — к ссылке добавляется дружественное название страницы: http://site.ru/content/blogcategory/35/75/#, с такой ссылкой страницу подбрасывает вверх.
    Подстановка “javascript:void(0);” и “javascript:;” вместо «#» в <a href=»#» ни к чему не приводит.

  4. Все дело в том, что скрипт не использует привязку к якорю. В ссылке мы ищем (href=»#asd»), где #asd — это css селектор. То есть на странице, где-то должен быть элемент с (id=»#asd»). У этого элемента мы считываем координаты и перенаправляем скроллинг до этого элемента.

    Видимо вы где-то делаете ошибку, потому что, повторюсь «скрипт не использует привязку к якорю».

  5. […] jQuery эффекты на примерах — выдвижная панель, эффект исчезновения. […]

  6. #10711 Сергей в 10:42, 16 ноября 2010:

    Ответить | Цитировать

    У меня используется такой код.

    $(document).ready(function(){
    $(‘.spoiler’).hide()
    $(‘.pressit’).click(function(){
    $(this).next().slideToggle(«slow»)
    })
    })

    Нажми меня

    Содержимое спойлера

    Подскажите, как сделать, чтобы при первом клике панель выдвигалась и больше назад не задвигалась при последующем нажатии?

  7. #10913 kate в 13:01, 2 февраля 2011:

    Ответить | Цитировать

    Подскажите, пожалуйста, как сделать чтобы панель выезжала справа налево, от правого края страницы.

  8. #10959 sam в 20:12, 9 февраля 2011:

    Ответить | Цитировать

    Kak вписать текст в появившиеся таблицу из примера №1 ???

  9. #12634 Тиесто в 12:28, 4 ноября 2011:

    Ответить | Цитировать

    Отличные примеры попробую и я

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting