Выскакивающие панели и опции метода animate

В этой статье продолжим рассмотрение метода animate библиотеки jQuery. В предыдущей статье был представлен формат использования метода animate и его параметры, рассмотрены примеры анимации css-свойств элементов, изменение скорости анимации и анимация подсветкой. В данной статье мы рассмотрим следующие возможности метода animate, позволяющие :

• формировать выскакивающие панели;
• определять опции метода animate;
• формировать цепочки действий.

Описание будем сопровождать примерами, реализацию которых интегрируем в интерфейс страницы.

Библиотека jQuery предоставляет разработчикам возможность скрывать контент и «представлять» его по просьбе читателя. Так, например, описанный ранее спойлер нашел широкое применение среди многих программистов. Я не стал исключением, и использую данный метод при представлении листинга примеров. В этой статье рассмотрим другой метод «скрытия» контента : создание выскакивающих панелей.

Выскакивающие панели можно рассматривать как «содержание», в котором каждая строка является локальной ссылкой. При нажатии на такую ссылку под ней открывается панель с контентом. Это позволяет сосредоточить внимание посетителей на структуре кратко представленной информации.

Рассмотрим пример представления на странице высказываний нескольких знаменитостей. Конечно же, внимание уделим не самим знаменитостям и их высказываниям, а представлению информации в виде «выскакивающих панелей». Чтобы читатель мог догадаться, что подзаголовок знаменитости представляет локальную ссылку, под которой скрывается некоторый контент, высказываения первой знаменитости сразу же раскроем. Кроме этого, будем подсвечивать знаменитость при наведении на неё курсора мыши; форму мыши также изменим на указатель (pointer). Вы можете самостоятельно проверить функциональность описанного примера. На отсутствие фото знаменитостей и стиль представления не сетуйте сильно; уверен, что у Вас получится лучше. При повторном нажатии на знаменитость контент сворачивается.

Описание примера

Ниже представлен листинг примера; цитаты изображены в виде многоточия. Панель каждой знаменитости помечается тегом <h4>, набор цитат объединяется в блок <div>. Описание скриптового блока представлено после листинга.

Скрыть листинг примера

<h3>Цитаты знаменитостей</h3>
<div id="citation">
    <h4>Черномырдин Виктор Степанович</h4>
        <div><p>...</p></div>
    <h4>Михаил Жванецкий</h4>
        <div><p>...</p></div>
    <h4>Фаина Раневская</h4>
        <div><p>...</p></div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    // скрываем высказывания
    $('#citation > div').hide();
    // открываем высказывания 1-го набора
    $('#citation > div:first').show();
    // определяем стиль заголовков/знаменитостей
    $('#citation h4').css({'background-color':'#80ccee',
                           'height':'18px',
                           'vertical-align':'middle',
                           'padding':'5px',
                           'margin-bottom':'3px',
                           'margin-top':'0px'});
    // изменения стиля ссылки/знаменитости
    $('#citation h4').hover(function() {
        $(this).css({'color':'blue', 'cursor':'pointer'});
    }, function() {
        $(this).css({'color':'black', 'cursor':'default'});
    });
    // анимация
    $('#citation h4').click(function() {
       $(this).next().animate(
            {'height' : 'toggle'}, 'slow', 'easeOutExpo'
      );
    });
});
</script>

Интерес представляет, конечно же, скриптовый блок, где реализуется функциональность задуманного :

• Функцией hide скрываются все высказывания знаменитостей, т.е. все элементы набора. Для этого селектором выбираются дочерние элементы (<div>) блока 'citation' с использованием символа '>', обозначающего дочерние элементы child.
• Второй строкой открываем высказывания первой знаменитости из набора; для этого используем фильтр (div:first).
• Методом .css определяются стили тегов <h4>.
• Методом hover стили заголовков представляются в виде ссылки. В качестве параметров hover принимает две функции. Первая функция определяет css-стиль при наведении курсора, вторая – при покидании.
• Анимация выскакивающих панелей выполняется при нажатии на заголовок знаменитости $('#citation h4').click(). Методу click передается анонимная функция, которая выбирает дочерний элемент .next() и вызывает метод animate. В качестве параметров метод animate получает :
  • properties – определение высоты методом toggle, т.е. чередование представления и скрытия;
  • duration – продолжительность выполнения анимации в виде slow(2600 мс);
  • easing – изменение скорости анимации в виде 'easeOutExpo'.

Как было отмечено ранее изменение скорости анимации с параметром linear и swing является для большинстав задач привлекательным и достаточным. Однако библиотека jQuery предлагает большой набор других параметров замедления, который не включен в состав основной библиотеки, но доступен в jquery-ui.js. В данной библиотеке доступны модули Easing, Color Animation, Class Transitions. В предыдущей статье об этом было уже рассказано. Вместо easing='easeOutExpo', используемый в примере, можно также использовать параметр 'easeOutBounce', обеспечивающий эффект скачущего мяча. Кроме этого, доступны методы easeInCirc, easeInOutExpo, easeOutBack, easeOutElastic, easeInOutElastic.

animate(properties, options);
 

Анимация в примере стартует нажатием на кнопку. В результате анимации css-стили объекта принимают новые значения. При повторном нажатии кнопки css-стили объекта восстанавливаются. Контроль состояния анимированного текста осуществляется наличием класса 'options', который управляется методом toggleClass : при первом вызове класс добавляется, при повторном – удаляется. Реализация примера представлена после листинга.

Скрыть листинг примера

<p id="options">Текст для анимации с использованием options</p>
<input type="button" id ="btnAnimate" value="Анимация" />
</div>
<script type="text/javascript">
$(document).ready(function() {
   $('#btnAnimate').click(function() {
      $('p').filter('#options').toggleClass('options');
      if ($('p').filter('#options').hasClass('options')) {
         $('p').filter('#options').animate(
            {
               height: '+=50px',
               backgroundColor: '#a0cdcf',
               padding: '8px'
            },
            {
               duration: 'slow',
               easing: 'swing',
               complete: function(){
                  $('#btnAnimate').val('Восстановить');
               }
            });
      } else {
         $('p').filter('#options').animate(
            {
               height: '-=50px',
               backgroundColor: '#d0fdff',
               padding: '0px'
            },
            {
               duration: 'slow',
               easing: 'swing',
               complete: function(){
                  $('#btnAnimate').val('Анимация');
               }
            });
      }
   });
});
</script>
 

<p id="chain">Текст анимации цепочкой действий</p>
<input type="button" id ="btnСhain" value="Анимация" />
<script type="text/javascript">
$(document).ready(function() {
    $('#btnСhain').click(function() {
        $('p').filter('#chain').toggleClass('chain');
        if ($('p').filter('#chain').hasClass('chain')) {
            $('p').filter('#chain').hide()
                                   .delay(1000)
                                   .slideDown('slow')
                                   .fadeOut(500);
            $(this).val('Восстановить');
        } else {
            $('p').filter('#chain').show()
                                   .delay(1000)
                                   .fadeOut(500)
                                   .fadeIn(500);;
            $(this).val('Анимация');
        }
    });
});
</script>
 

Продолжение статьи связано с созданием анимированных навигационных панелей.

Связанные страницы