Базовая анимация библиотекой jQuery

Изменение прозрачности элементов методами fadeIn и fadeOut

Самыми распространенными методами jQuery для плавного изменения прозрачности элемента являются методы fadeIn и fadeOut. Метод fadeIn сначала размещает элемент на странице с нулевой прозрачностью (невидим), после чего плавно убирает прозрачность, делая видимым. Метод fadeOut «выполняет» обратную функцию – сначала снижает прозрачность элемента, после чего удаляет его со страницы. Таким образом, методы fadeIn и fadeOut дополняют методы show и hide изменением прозрачности. Для того, чтобы использовать данные методы достаточно заменить метод show на fadeIn, метод hide – на fadeOut.

// анимация скрытия сообщения
$('#warning').fadeOut();

// анимация представления сообщения
$('#warning').fadeOut();
 

Существуют и опциональные параметры, определяющие временной промежуток анимации, которые могут быть как целочисленными значениями (милисекунды), так и текстовыми : slow, fast, normal. Следующий блок демонстрирует скрытие и представление Текста второго абзаца методами fadeOut и fadeIn при нажатии на кнопку анимации :

Анимация методом toggle

Функция обратного вызова, callback

Многие методы, представленные выше, поддерживают в качестве второго параметра некоторый код, называемый функцией обратного вызова callback. Данные функции вызываются сразу же после завершения действия родительского метода, т.е. после завершения анимационного эффекта. Пример callback :

$('#message').slideToggle('slow', function() {
    alert('Действие функции slideToggle завершено!');
});
 

В представленном примере callback передается в качестве второго параметра методу slideToggle в виде анонимной функции function. Рассмотрим следующий пример : на странице размещаем сообщение с кнопкой, при нажатии на которую сначала плавно скрывается «Предупреждающее сообщение» методом fadeOut. Вторым параметром методу fadeOut передается callback-функция, которая вызывается после скрытия сообщения, чтобы также плавно убрать со страницы кнопку.

<h4>Пример скрытия сообщения и кнопки методом fadeOut</h4>
<p id="msgFadeOut">Предупреждающее сообщение.</p>

<script type="text/javascript">
  $(document).ready(function() {
      $('#btnFadeOut').click(function() {
        $('#msgFadeOut').fadeOut('slow', function() {
           $('#btnFadeOut').fadeOut('slow');
        });
    });
  });
</script>
 

Ниже представлен блок с реализованным примером, описанным выше. При нажатии на кнопку со странице будут удалены последовательно сообщение и кнопка :

Подсветка элементов при наведении на них указателя мыши

Методы mouseover и mouseout библиотеки jQuery позволяют реализовать подсветку элементов объектной модели документа DOM при наведении на них указателя мыши. Рассмотрим следующий пример :

<h4>Пример подсветки методами mouseover и mouseout</h4>
<p id="hover">Подсвечиваемое сообщение.</p>

<script type="text/javascript">
  $(document).ready(function() {
    $('#hover').mouseover(function() {
        $(this).css('color', '#02f');
    });
    $('#hover').mouseout(function() {
        $(this).css('color', '#000');
    });
  });
</script>
 

Раскрывающийся текст, spoiler

Спойлер – это раскрывающийся блок. Обычно он представляет текстовую ссылку, при нажатии на которую раскрывается ниже расположенный блок с информацией. Конструкция спойлера используется практически на многих сайтах, связанных, чаще всего, с размещением большого объема контента на небольшой площади, либо с блоками вопрос-ответ. Конечно же, для каждого WEB-мастера умение использовать спойлеры имеет очень важное значение.

Библиотека jQuery предоставляет простое решение создания на WEB-странице спойлера. Рассмотрим код следующего примера, реализация которого представлена ниже :

<h4 id="spoiler-title">Раскрыть текст</h4>
<div id="spoiler-body" 
     style="font-style:italic">Текст под спойлером</div>

<script type="text/javascript">
$(document).ready(function() {
   $('#spoiler-body').hide();

   $('#spoiler-title').click(function(){
      $('#spoiler-title').toggleClass("show");

      $(this).next().slideToggle(500, function() {
         if ($('#spoiler-title').hasClass('show'))
             $('#spoiler-title').text('Срыть текст');
         else
             $('#spoiler-title').text('Раскрыть текст');
      });
   });
});
</script>
 

На странице размещается только одна видимая строка – заголовок <h4> с id="spoiler-title" –, предлагающая раскрыть текст, размещенный под ней. Раскрывающийся «Текст под спойлером», имеющий идентификатор id="spoiler-body", скрывается со страницы методом hide в скриптовом блоке (разовое действие). К заголовку подключена функция, в которой выполняется несколько действий :