Плавное отображение и скрытие блоков на JQuery

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

После того, как Вы скачали JQuery, поместите ее в любое место вашего сайта или страницы, но лучше создать отдельную папку js, чтобы в последующем кидать туда остальные скрипты, итак, положили JQuery в папку с сайтом, теперь нужно ее подключить:

<script type="text/javascript" src="js/jQuery.js"></script>

Теперь нам нужно написать функцию, которая скрывает и показывает элемент страницы:

<script type="text/javascript"> 
function diplay_hide (blockId) 
{ 
    if ($(blockId).css('display') == 'none') 
        { 
            $(blockId).animate({height: 'show'}, 500); 
        } 
    else 
        {     
            $(blockId).animate({height: 'hide'}, 500); 
        } 
} 
</script>

Данная функция проверяет, если в css стиле блока (в моем случае это #blockID) стоит значение параметра display: none;, то показывает это элемент, иначе скрывает его, последний аргумент функции animate — 500 — задержка анимации в мс

Ну и теперь, приведу пример самого блока, который будет использовать нашу функцию:

<div id="block_id" style="display: none;"><p><b>Так работает JQuery</b></p></div>

Обязательно поставьте атрибут display: none; в css стиле данного блока, иначе в первоначально состоянии он будет показан на экране.

Ниже приведен полный код нашего скрипта:

<script type="text/javascript"> 
function diplay_hide (blockId)

{ 
    if ($(blockId).css('display') == 'none') 
        { 
            $(blockId).animate({height: 'show'}, 500); 
        } 
    else 
        {     
            $(blockId).animate({height: 'hide'}, 500); 
        }} 
</script>

<a href="#" onclick="diplay_hide('#block_id');return false;">Пример</a>

<div id="block_id" style="display: none;"><p><b>Так работает JQuery</b></p></div>

Пример работы скрипта

Hello, JQuery!

Вместо onclick можно использовать другие обработчики событий, такие как onmouseover — событие при наведении мыши, onsubmit — событие, происходящее при отправке формы и пр.