Раскрытие и скрытие div с помощью jquery

Раскрытие и скрытие div с помощью jqueryДанный урок очень прост,  но темне мение эфект раскрытия и скрытия обьектов используется достаточно часто. А мы это сделаем еще и с анимацией.

Не знаю как кому, но я очень часто использую фишку с отображением и скрытием какого либо слоя. Нюанс состоит в том, чтобы передать функции только, к примеру, идентификатор слоя id, а она уж сама, в зависимости от значения свойства  — display сменит его на противоположное. , в этом случа предоставил возможность анимировать процес с раскрытием/закрытием слоя.

Вещь достаточно простая и удобная. Свою функцию я назвал anichange, вот она:

<strong><span style="color: #800000;">&lt;script&gt;</span>
function anichange (<span style="color: #800080;">objName</span>) {
  if ( $(<span style="color: #800080;">objName</span>).css('<span style="color: #008000;">display</span>') == '<span style="color: #008000;">none</span>' ) {
    $(<span style="color: #800080;">objName</span>).animate({height: '<span style="color: #008000;">show</span>'}, 400);
  } else {
    $(<span style="color: #800080;">objName</span>).animate({height: '<span style="color: #008000;">hide</span>'}, 200);
  }
}
<span style="color: #800000;">&lt;/script&gt;</span></strong>

Как это работает? Первое на что стоит обратить свое внимание для ответа на поставленный вопрос это функция css. В моем примере она используется для считывания значения у свойства display объекта objName (может быть значением атрибута id, к примеру: #divId).

В зависимости от полученного значения, используя функцию animate, мы производим изменение на противоположное с тем или иным эффектом анимации. Конечно, здесь есть еще масса всяческих возможностей, которые предоставляет библиотека jQuery, но мой пример такой какой есть.

Как это использовать? И так, с функцией – понятно. Теперь давайте воспользуемся ей на практике. Здесь надо понимать, что должна быть подключена сама библиотека jQuery (скачать jQuery):

<script src="jquery." type="text/javascript"></script>

И уже после этой строки идет выше упомянутый код функции anichange. Разместите этот код в том же head, а дальнейший пример в body:

&lt;a href="#" onclick="anichange('#divId'); return false"&gt;Открыть/Закрыть&lt;/a&gt;
&lt;div id="divId" style="display: none"&gt;
Текст в скрытом слое &lt;br&gt;
Текст в скрытом слое &lt;br&gt;
Текст в скрытом слое &lt;br&gt;
Текст в скрытом слое &lt;br&gt;
&lt;/div&gt;

Для большей наглядности эффекта анимации, в слой помещен текст из нескольких строк. По умолчанию он не виден, что обеспечивается за счет: style="display: none". При клике по ссылке anichange будет выполнена одноименная функция – слой откроется, а при повторном клике – закроется и так раз за разом.

Вот собственно и все. Думаю, что сказанного, вполне достаточно и без какого либо наглядно работающего примера (не люблю я париться над вставками таковых – сорки). Надеюсь, что кому-то заметка будет полезна и спасибо за внимание.

  • Kurt

    а чем toggle () не угодила?

  • Alexandr

    Спасибо помогло

  • semchyk

    полезно почитать спасибо.

  • Евгений

    А вот я хочу сделать чтобы окно только открывалось по нажатию на кнопку открыть. А закрытие окнаможно было провести изнутри его тоесть например:

    ПОльзователь нажимает выход, появляеся такое окно, вне написанно Выйти? Да Нет. При нажатии на нет окно закрывается... я торможу что то как сделать то?

  • Денис

    Добрый день.

    Спасибо за урок, все получилось.

    Но есть одна проблема.

    На сайте используется еще один скрипт ja.script.js и ваш скрипт с ним конфликтует.

    Если ставишь ваш скрипт перед ja.script.js, то он не включается.

    А если ставишь после, то не работает ja.script.js.

    Можете подсказать, что можно сделать.

  • Сергей

    Спасибо! То, что нужно!

Запись навигация

Top