Данный урок очень прост, но темне мение эфект раскрытия и скрытия обьектов используется достаточно часто. А мы это сделаем еще и с анимацией.
Не знаю как кому, но я очень часто использую фишку с отображением и скрытием какого либо слоя. Нюанс состоит в том, чтобы передать функции только, к примеру, идентификатор слоя id, а она уж сама, в зависимости от значения свойства CSS — display сменит его на противоположное. jQuery, в этом случа предоставил возможность анимировать процес с раскрытием/закрытием слоя.
Вещь достаточно простая и удобная. Свою функцию я назвал anichange, вот она:
<script> function anichange (objName) { if ( $(objName).css('display') == 'none' ) { $(objName).animate({height: 'show'}, 400); } else { $(objName).animate({height: 'hide'}, 200); } } </script>
Как это работает? Первое на что стоит обратить свое внимание для ответа на поставленный вопрос это функция css. В моем примере она используется для считывания значения у свойства display объекта objName (может быть значением атрибута id, к примеру: #divId).
В зависимости от полученного значения, используя функцию animate, мы производим изменение на противоположное с тем или иным эффектом анимации. Конечно, здесь есть еще масса всяческих возможностей, которые предоставляет библиотека jQuery, но мой пример такой какой есть.
Как это использовать? И так, с функцией – понятно. Теперь давайте воспользуемся ей на практике. Здесь надо понимать, что должна быть подключена сама библиотека jQuery (скачать jQuery):
<script src="jquery.js" type="text/javascript"></script>
И уже после этой строки идет выше упомянутый код функции anichange. Разместите этот код в том же head, а дальнейший пример в body:
<a href="#" onclick="anichange('#divId'); return false">Открыть/Закрыть</a>
<div id="divId" style="display: none">
Текст в скрытом слое <br>
Текст в скрытом слое <br>
Текст в скрытом слое <br>
Текст в скрытом слое <br>
</div>
Для большей наглядности эффекта анимации, в слой помещен текст из нескольких строк. По умолчанию он не виден, что обеспечивается за счет: style="display: none". При клике по ссылке anichange будет выполнена одноименная функция – слой откроется, а при повторном клике – закроется и так раз за разом.
Вот собственно и все. Думаю, что сказанного, вполне достаточно и без какого либо наглядно работающего примера (не люблю я париться над вставками таковых – сорки). Надеюсь, что кому-то заметка будет полезна и спасибо за внимание.