Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Скрываем плавно div блоки

Скрываем плавно div блокиСегодня я вам расскажу как при помощи jquerty библиотеки сделать плавные эффекты чтобы свернуть и развернуть блок с контентом. В теорию как это работает мы углублятся не будем, а начнем сразу с практики. Реализовывается всё очень просто. Подключаем библиотке и создаем кнопки.

И так начнем.
Подключаем библиотеку
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>

Скачать последнюю версию можно на официальном сайте jQuery.

Создаем кнопки скрытия и блок с контентом
<input type="button" value="hide" onclick="$('div.container').hide();">
<input type="button" value="hide Speed" onclick="$('div.container').hide('slow');">
<input type="button" value="show" onclick="$('div.container').show();">
<input type="button" value="show Speed" onclick="$('div.container').show('slow');">
<input type="button" value="toggle" onclick="$('div.container').toggle();">
<input type="button" value="toggle=true" onclick="$('div.container').toggle(1>0);">
<input type="button" value="toggle=false" onclick="$('div.container').toggle(1>10);">
<input type="button" value="toggle speed" onclick="$('div.container').toggle('slow');">
<div class="container">
<img src="pokazat-ili-skrit-block.jpg">
</div>

Наш пример будет выглядеть вот так:
Скрываем плавно div блоки

При желании можно украсить при помощи css стилей.

Демо: смотреть
Скачать:showhide.zip [88,68 Kb] (cкачиваний: 192)
Опубликовал dimas_ua, 4-09-2010, 00:00 Комментариев: 1
 (голосов: 0)
Пишет Sergio, 6 сентября 2010 11:00
  • Сообщений: 0
  • Новостей: 0
Слишком тяжелый для этой функции 265кб