timbios Опубликовано 4 ноября, 2015 Жалоба Поделиться Опубликовано 4 ноября, 2015 Практически на каждом сайте Вы можете увидеть кнопки - Подробнее, Информация, Открыть/Скрыть информацию и подобные им. При нажатии на них плавно раскрывается блок с соответствующей информацией. Как это реализовать? Достаточно просто. При помощи JS (библиотеки jQuery). Подключим её с сервера Google: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> Теперь пример целиком. Чтобы не разбирать его по частям и не путать Вас, прокомментирую все основные моменты прямо в нём. <!DOCTYPE html> <html> <head> <!-- Подключаем jQuery --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/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. На локалке без доступа в интернет пример работать не будет. По этому примеру можно украсить вашу сборку. Такой пример есть в сборке Freend (Точнее рипа сборки.) Ссылка на комментарий Поделиться на другие сайты Поделиться
Why Not Опубликовано 5 ноября, 2015 Жалоба Поделиться Опубликовано 5 ноября, 2015 Это плавное появление блока. Плавное разворачивание/сворачивание при помощи hide(200) и show(200) Ссылка на комментарий Поделиться на другие сайты Поделиться
timbios Опубликовано 5 ноября, 2015 Автор Жалоба Поделиться Опубликовано 5 ноября, 2015 Это плавное появление блока. Плавное разворачивание/сворачивание при помощи hide(200) и show(200) Спасибо что повравил. Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения