Главная :: Полезные коды :: Ajax / Jquery :: Плавное открытие и скрытие блока Jquery
Описание: Практически на каждом сайте Вы можете увидеть кнопки - Подробнее, Информация, Открыть/Скрыть информацию и подобные им. При нажатии на них плавно раскрывается блок с соответствующей информацией. Как это реализовать?

Достаточно просто. При помощи JS (библиотеки jQuery). Подключим её с сервера Google:
Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/10/jquery.min.js"></script>

Теперь пример целиком. Чтобы не разбирать его по частям и не путать Вас, прокомментирую все основные моменты прямо в нём.

<!DOCTYPE html>
<html>
<head>
<!-- Подключаем jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/10/jquery.min.js"></script>

<!-- Скрипт плавного открытия и закрытия блока -->
<script type='text/javascript'>
$(document).ready(function() {
$("A#trigger").toggle(function() {
// Отображаем скрытый блок
$("DIV#box").fadeIn(); // fadeIn - плавное появление
return false; // не производить переход по ссылке
},
function() {
// Скрываем блок
$("DIV#box").fadeOut(); // fadeOut - плавное исчезновение
return false; // не производить переход по ссылке
}); // end of toggle()
}); // end of ready()
</script>

</head>
<body>

<a href='#' id='trigger'>Открыть/скрыть информацию</a> <!-- Всё происходит при нажатии на ссылку -->
<div id='box' style='display: none;padding:10px;background-color:#f1f1f1;margin:10px;width:210px;'>Содержимое скрытого блока</div>

</body>
</html>

Не забываем, что в данном примере происходит удалённое подключение jQuery. На локалке без доступа в интернет пример работать не будет.
Добавил: CHISELEY (12 Июня 2016 в 10:39)

Мы рекомендуем