Jump to content
Sign in to follow this  
timbios

Плавное появление блока div средствами jQuery

Recommended Posts

Практически на каждом сайте Вы можете увидеть кнопки - Подробнее, Информация, Открыть/Скрыть информацию и подобные им. При нажатии на них плавно раскрывается блок с соответствующей информацией. Как это реализовать?
 
Достаточно просто. При помощи 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 (Точнее рипа сборки.)

Share this post


Link to post

Это плавное появление блока. Плавное разворачивание/сворачивание при помощи hide(200) и show(200)

Share this post


Link to post

Это плавное появление блока. Плавное разворачивание/сворачивание при помощи hide(200) и show(200)

Спасибо что повравил.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×