Jump to content

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


timbios
 Share

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 (Точнее рипа сборки.)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...