Пример использования методов slidedown и slideup в jQuery

Вот краткое резюме и анализ примеров использования методов slidedown и slideup в jQuery. Предлагается к рассмотрению, вот так:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnslideDown").click(function () {
        $("#message").slideDown(1000);
      });
      $("#btnslideUp").click(function () {
        $("#message").slideUp(1000);
      });
      //*****Пример 1
      //      $("#btnToggle").click(function () {
      //        $("#message").slideToggle(1000);
      //      });
      //*****Пример 2: Функции анимации могут передавать обратные вызовы, то есть после выполнения анимации будет выполнена эта функция
      $("#btnToggle").click(function () {
        
          alert('Я завершен!');
        });
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnslideDown" type="button" value="Развернуть div" />
    <input id="btnslideUp" type="button" value="Свернуть div" />
    <input id="btnToggle" type="button" value="Переключить" />
  </div>
  <div id="message">
    Разница между mouseover и mouseenter: div в div. См. примечание. Имеет отношение к событиям перехвата. <br /> 
    Событие mouseover срабатывает при прохождении мыши через выбранный элемент или его подэлементы <br />
    Событие mouseenter срабатывает только при прохождении мыши через выбранный элемент (пройдение через подэлементы не срабатывает)
  </div>
</body>
</html>

Для тех, кто интересуется дополнительной информацией о jQuery, рекомендуется посмотреть темы на этом сайте: «Сводка技巧 по операциям с окнами jQuery», «Сводка技巧 по эффектам перетаскивания jQuery», «Сводка技巧 по常用插件 и их использованию jQuery», «Сводка использования Ajax в jQuery», «Сводка技巧 по операциям с таблицами (table) jQuery», «Сводка技巧 по расширениям jQuery», «Сводка классических эффектов jQuery», «Сводка использования анимаций и эффектов jQuery» и «Сводка использования селекторов jQuery»

Надеюсь, что информация, изложенная в этой статье, поможет вам в разработке на jQuery.

Заявление: содержимое статьи взято из Интернета, авторские права принадлежат соответствующему автору, содержимое предоставлено пользователями Интернета в порядке добровольного вклада и загрузки, сайт не имеет права собственности, не производит редактирование содержимого вручную и не несет ответственности за связанные с этим юридические последствия. Если вы обнаружите материалы,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для подачи жалоб и предоставления соответствующих доказательств. При подтверждении факта нарушения авторских прав сайт незамедлительно удаляет материалы,涉嫌侵权.

Основной курс

Вам может понравиться