Шаг 55.
Библиотека jQuery. Эффекты. Эффекты и скорость выполнения. Эффекты проявления и растворения

    На этом шаге мы рассмотрим методы, применяемые для реализации эффектов проявления и растворения.

    Несмотря на то, что анимированные методы .show() и .hide() определенно обладают эффектностью, иногда она может оказаться излишней. К счастью, библиотека jQuery предлагает пару других встроенных и более тонких анимационных эффектов. Например, чтобы обеспечить появление параграфа только за счет плавного увеличения непрозрачности, можно воспользоваться методом .fadeIn('slow'):

$(document).ready(function() {
  $('p:eq(1)').hide(); 
  $('a.more').click(function() {
    $('p:eq(1)').fadeIn('slow');
    $(this).hide();
    return false;
  });
});

    Посмотреть в действии этот эффект можно, воспользовавшись рисунком 1.

Рис.1. Медленное проявление второго абзаца

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

    Отличие заключается в том, что эффект, воспроизводимый методом .fadeIn(), начинается с установки нормального размера параграфа, чтобы его содержимое просто постепенно проявлялось в нем. Для плавного уменьшения непрозрачности можно использовать метод .fadeOut().

    На следующем шаге мы рассмотрим составные эффекты.




Предыдущий шаг Содержание Следующий шаг