timbios Posted November 4, 2015 Report Share Posted November 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 (Точнее рипа сборки.) Quote Link to comment Share on other sites More sharing options...
Why Not Posted November 5, 2015 Report Share Posted November 5, 2015 Это плавное появление блока. Плавное разворачивание/сворачивание при помощи hide(200) и show(200) Quote Link to comment Share on other sites More sharing options...
timbios Posted November 5, 2015 Author Report Share Posted November 5, 2015 Это плавное появление блока. Плавное разворачивание/сворачивание при помощи hide(200) и show(200) Спасибо что повравил. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.