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

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

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

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

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

В начале создаем html код:
<div id="panel">
<!-- Содержимое спрятанного блока -->
</div>
<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>

Добавляем 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">
<h3>Блок</h3>
<p>Текст внутри блока</p>
<span class="delete">Удалить</span>
</div>

Когда мы кликаем по тексту <span class="delete">Удалить</span>"«, будет найден родительский элемент „<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. #2731 Алекcей в 19:41, 19 июля 2009: (подписался)

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

    Классно! На самом деле даже не сложно! :-) Спасибо! ;-)

    Только вот ссылка на второй пример у Вас не работает. :- (

  2. #2741 WebMast в 9:28, 20 июля 2009:

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

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

  3. #2744 Алексей в 10:42, 20 июля 2009: (подписался)

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

    Как сделает отпишитесь пожалуйста здесь в комментах. А то мне некогда писать это самому (даже копипастить), а посмотреть охото. :-)

  4. #2748 WebMast в 12:33, 20 июля 2009:

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

    Алексей, все. Теперь работает ссылка на второй пример ; ).

  5. #2752 Алексей в 17:18, 20 июля 2009: (подписался)

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

    Спасибо! Прикольная штука! :-)

  6. #3409 andrexus в 0:22, 7 августа 2009:

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

    А как можно зациклить эффект?

  7. #3427 WebMast в 10:53, 7 августа 2009:

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

    В каком смысле зациклить?

  8. #3431 andrexus в 12:30, 7 августа 2009:

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

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

  9. #3498 WebMast в 19:14, 8 августа 2009:

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

    Можно просто заного запускать анимацию. Например так:

    $(«.click»).fadeIn («slow», function (){

    $(«.click»).fadeOut («slow»);

    });

    Или так:

    $(«.click»).fadeIn («slow»);

    $(«.click»).fadeOut («slow»);

  10. #7836 Евгений в 0:27, 2 ноября 2009: (подписался)

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

    Подскажите пожалуйста, если я хочу с помощью первого примера сделать личное меню на сайте, сначала человек нажимает на надпись войти, выезжает форма входа, замечательно, человек производит вход, а дальше возникает вопрос, как сделать так что бы когда пользователь авторизовался, блок не исчезал, а был display:block;?

    Заранее спасибо.

    С уважением Евгений.

  11. #7971 WebMast в 17:29, 6 ноября 2009:

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

    Евгений, нужно делать обработчик. Если присутствует кнопка войти, то панель изначально не видна, а если кнопки нету, то панель показывать... Это самое простое что пришло мне в голову...

  12. #8053 Евгений в 23:52, 11 ноября 2009: (подписался)

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

    WebMast, вы не подскажете, как сделать так, что бы когда наводишь мышку на <a href="#" rel="nofollow">Slide Panel</a> без нажатия выплывало содержимое блока ?

  13. #8065 WebMast в 9:44, 12 ноября 2009:

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

    Вот так:

    $(селектор).hover (function (){

    Вместо «селектор» нужно добавить класс ссылки.

  14. #9220 Daniel в 21:18, 9 января 2010:

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

    все работает :) спасибо)

  15. #9290 WQ в 3:16, 30 января 2010:

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

    то что нужно

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

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

    При включённом sef (OpenSEF) на Joomla выдвижная панель неработает.

    При выключенном sef ссылка <a href="#" выглядит как сайт.ру/# и спойлер открывается

    а при включённом sef — сайт.ру/страница.html/# то есть к ссылке добавляется «страница.html» и спойлер неработает.

    Скажите пожалуйста как решить?

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

  18. #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="#" и при наведении отображается так — site.ru/#, спойлер работает нормально — выдвигается панель.

    Но стоит в админке включить SEO — к ссылке добавляется дружественное название страницы: site.ru/content/blogcategory/35/75/#, с такой ссылкой страницу подбрасывает вверх.

    Подстановка “javascript:void (0);” и “javascript:;” вместо «#» в <a href="#" ни к чему не приводит.

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

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

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

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

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

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

    $(document).ready (function (){

    $('.spoiler').hide ()

    $('.pressit').click (function (){

    $(this).next ().slideToggle («slow»)

    })

    })

    Нажми меня

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

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

  22. #10913 kate в 13:01, 2 февраля 2011: (подписался)

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

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

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

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

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

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

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

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

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

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя