Начинаем с само собой разумеющегося – подключаем библиотеку jQuery:

<script src="js/jquery-1.3.1.js" type="text/javascript"></script>

Постараемся не вносить в HTML-разметку лишних идентификаторов, имен классов, попробуем обойтись минимумом. Для выстраивания миниатюр используем ненумерованный список ul, в каждом элементе li которого и будет содержаться миниатюра. Миниатюре – тэгу img, добавим атрибут alt, в который напишем комментарий к фотографии. Картинку-миниатюру заключим в тэг a, атрибут href которого будет указывать на полноразмерную фотографию. С миниатюрами все. Добавим в HTML-разметку элемент div, в который будем загружать полноразмерные изображения при клике на соответствующую миниатюру и вот ему пожалуй придется присвоить идентификатор #imgHolder. Получилась вот такая простенькая разметка:

<ul>
  <li>
    <a href="max/1.jpg">
      <img src="min/1.jpg" alt="Офигительный жучила..." />
    </a>
  </li>
  .......
  <li>
    <a href="max/7.jpg">
      <img src="min/7.jpg" alt="Гадина какая-то страшная..." />
    </a>
  </li>
</ul>
<div id="imgHolder"></div>

С помощью CSS оформляем разметку так, как нам понравится.

img { border:none; }
ul { margin:0; padding:0; list-style:none; }
ul li { display:inline; }
#imgHolder {
  position:relative;
  width:800px; height:600px;
  overflow:hidden;
}
#imgHolder em {
  position:absolute;
  left:10px; bottom:10px;
  margin:2px 10px; padding:2px 10px;
  background-color:#000;   color:#fff;
}

В примере – не показываем рамку у изображений, для списка задаем нулевые значения полей и отступов, для элементов li устанавливаем свойству display значение inline, вытягивая таким образом список в строку. Зададим блоку #imgHolder ширину, высоту и на всякий случай свойству overflow присвоим значение hidden. Позиционируем элемент em внутри div‘а абсолютно (сюда будем выводить комментарии к фотографиям) и оформим его соответствующим образом.

Осталось самое главное – эти одиннадцать строк кода, которые заставят работать эту конструкцию. Вот эти строки:

$('ul img').click(function(){
  var path = $(this).parent().attr('href');
  var alt = $(this).attr('alt');
  $('#imgHolder').animate({opacity: 0},1000,function(){
    $(this).html('<img src=' + path + ' />').find('img').bind('load',function(){
      $(this).parent().append('<em>' + alt + '</em>').animate({opacity: 1},1000);
    });
  });
  return false;
});
$('ul img:first').click();

Давайте подробно, строка за строкой разберемся, что мы тут наделали.

При загрузке страницы, вернее при наступлении момента готовности DOM (кусок кода с $(document).ready() опущен) мы выбираем все элементы img, которые являются потомками элементов ul. Есть у нас такие? Да, есть – это картинки-миниатюры. Связываем с этим набором элементов событие click, при наступлении которого выполним некоторую функцию.

Что же будет делать эта функция? Для начала определяем пару переменных. path – здесь мы запомним значение атрибута href элемента, который является предком картинки-миниатюры, т.е. элемента a. alt – сюда поместим содержимое атрибута alt самой картинки-миниатюры, чтобы впоследствии вывести его в качестве комментария к полноразмерному изображению.

Дальше начинается самое интересное – с помощью метода animate() мы в течение 1000 мс плавно скроем элемент div с идентификатором #imgHolder через задание значения 0 его CSS-свойству opacity. И как только это произойдет начнем действовать дальше, указав в третьем параметре метода animate() callback-функцию, которая будет вызвана в этот момент.

Внутри этой функции this ссылается на элемент div с идентификатором #imgHolder. Помня это обстоятельство, помещаем в этот элемент div фрагмент html-кода, описывающий элемент img – полноразмерную картинку. В атрибуте src которой указываем путь, сохраненный ранее в переменной path. Следуя далее по цепочке вызовов, отыскиваем только что добавленный элемент с помощью метода find() и используя метод bind(), связываем еще одну callback-функцию c событием load – с моментом загрузки полноразмерного изображения.

Внутри этой функции this указывает уже на большую картинку, поэтому мы отыскиваем ее родителя (элемент div #imgHolder) и используя append() добавляем туда em с комментарием, который предусмотрительно сохранили в переменной alt. После этого вновь используем метод animate(), но уже для того, чтобы плавно, в течение 1 секунды показать элемент div #imgHolder с уже загруженной полноразмерной фотографией, устанавливая CSS-свойству opacity значение 1.

return false служит для того, чтобы предотвратить стандартные действия браузера (т.е. переход по ссылке) при клике на элементе a.

Осталась только самая последняя строка кода, которая служит для того, чтобы при загрузке страницы подгрузить в #imgHolder полноразмерную фотографию с помощью эмуляции события click на первой картинке-миниатюре.

Проверил и убедился, что все работает в в FF2 и 3, Opera9, IE6 и 7, Google Chrome.

Вы можете открыть пример в новом окне, испытать его и посмотреть полный исходный код. Вы можете скачать архив, который содержит все файлы примера.

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

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

show(effect, options, [speed], [callback])

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

В примере применяется эффект slide чтобы показать элемент div, если совершен клик на параграфе.

$("p").click(function () {
  $("div").show("slide", {}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы:

effect – String – Название эффекта.
options – Hash – Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) – String, Number – Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) – Function – Функция, которая может быть вызвана при завершении эффекта.

hide(effect, options, [speed], [callback])

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

В примере применяется эффект slide чтобы скрыть элемент div, если совершен клик на параграфе.

$("p").click(function () {
  $("div").hide("slide", {}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы:

effect – String – Название эффекта.
options – Hash – Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) – String, Number – Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) – Function – Функция, которая может быть вызвана при завершении эффекта.

toggle(effect, options, [speed], [callback])

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

В примере применяется эффект slide чтобы переключать элемент div, если совершен клик на параграфе.

$("p").click(function () {
  $("div").toggle("slide", {}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы:

effect – String – Название эффекта.
options – Hash – Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) – String, Number – Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) – Function – Функция, которая может быть вызвана при завершении эффекта.

effect(effect, options, [speed], [callback])

Возвращает: jQuery
Использует эффект для элемента (без использования логики show/hide).

В примере применяется эффект explode, если на элементе совершен клик.

$("div").click(function () {
  $(this).effect("explode", {}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы:

effect – String – Название эффекта.
options – Hash – Объект, состоящий из пар ключ/значение, включающий определение опций для этого эффекта.
speed (Optional) – String, Number – Строка, представляющая одно из трех предопределенных значений скорости эффекта («slow», «normal», или «fast») или число миллисекунд, в течение которых выполняется анимация (например 1000).
callback (Optional) – Function – Функция, которая может быть вызвана при завершении эффекта.

Мы узнали как можно использовать эффекты, но пока использовали только парочку из них. Давайте теперь подробнее познакомимся с перечнем эффектов и узнаем, какие из них можно использовать автономно, а какие можно применять с show, side и toggle.
Разумеется для начала нам потребуется подключить файл библиотеки jQuery, файл effects.core.js и файл нужного эффекта. Выглядеть это будет примерно так:

<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/effects.core.js" type="text/javascript"></script>
// подключаем файл нужного эффекта
<script src="js/effects.bounce.js" type="text/javascript"></script>

Познакомимся сначала с эффектами, которые можно использовать автономно (без логики show/hide). Таких эффектов четыре – bounce, highlight, shake, transfer.

Bounce

$("#div1").click(function () {
  $(this).effect("bounce", { times: 3 }, 300);
});
$("#div2").click(function () {
  $(this).effect("bounce", { times: 7,
      direction: 'right',
      distance: 50 }, 300);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: up
«up», «down», «left», «right»
distance – Integer – по умолчанию: 20
расстояние в пикселах
times – Integer – по умолчанию: 5
количество раз

Highlight

$("#div1").click(function () {
  $(this).effect("highlight", {}, 1000);
});
$("#div2").click(function () {
  $(this).effect("highlight", {color: '#ff0000'}, 500);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

color – String – по умолчанию: #ffff99
цвет подсветки

Shake

$("#div1").click(function () {
  $(this).effect("shake", { times: 3 }, 300);
});
$("#div2").click(function () {
  $(this).effect("shake", {
      times: 4,
      direction: 'down',
      distance: 10 }, 300);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: left
«up», «down», «left», «right»
distance – Integer – по умолчанию: 20
расстояние в пикселах
times – Integer – по умолчанию: 3
количество раз

Transfer

$("div.green1").click(function () {
  $(this).effect("transfer", { to: "div.red" }, 2000);
});
$("div.green2").click(function () {
  $(this).effect("transfer", { className: "transfer2",
      to: "div.red" }, 800);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

className – String
Имя класса (опционально), которое можно назначить отображению трансформируемого элемента вместо стандартного «ui-effects-transfer».
to – String
jQuery селектор, определяющий элемент в который происходит трансформация.

Ну а теперь перечислим эффекты, которые можно использовать вместе с Show/Hide/Toggle:

Blind

$("#div1").click(function () {
  $(this).hide("blind", {direction:"vertical"}, 1000);
});
$("#div2").click(function () {
  $(this).hide("blind", {direction:"horizontal"}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: vertical
«vertical» или «horizontal»

Clip

$("#div1").click(function () {
  $(this).hide("clip", {direction:"vertical"}, 1000);
});
$("#div2").click(function () {
  $(this).hide("clip", {direction:"horizontal"}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: vertical
«vertical» или «horizontal»

Drop

$("#div1").click(function () {
  $(this).hide("drop", { direction: "left" }, 1000);
});
$("#div2").click(function () {
  $(this).hide("drop", { direction: "down" }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: left
«left», «right», «up», «down»

Explode

$("#div1").click(function () {
  $(this).hide("explode", {}, 1000);
});
$("#div2").click(function () {
  $(this).hide("explode", { pieces: 25 }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

pieces – Integer – по умолчанию: 9
количество штук.

Fold

$("#div1").click(function () {
  $(this).hide("fold", {}, 1000);
});
$("#div2").click(function () {
  $(this).hide("fold", { size: 50 }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

size – Integer – по умолчанию: 15
размер в пикселах.

Puff

$("#div1").click(function () {
  $(this).hide("puff", {}, 1000);
});
$("#div2").click(function () {
  $(this).hide("puff", { percent: 700 }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

percent – Integer – по умолчанию: 150
Количество процентов.

Slide

$("#div1").click(function () {
  $(this).hide("slide", { direction: "left" }, 1000);
});
$("#div2").click(function () {
  $(this).hide("slide", { direction: "down" }, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: left
«left», «right», «up», «down»

Scale

$("#div0").click(function () {
  $(this).hide("scale", {}, 1000);
});
$("#div1").click(function () {
  $(this).effect("scale", { percent: 0 }, 1000);
});
$("#div2").click(function () {
  $(this).effect("scale", {
        percent:200,
        direction:'horizontal'}, 1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

direction – String – по умолчанию: both
‘both’, ‘vertical’, ‘horizontal’
from – Object
Начальное состояние. Обычно не требуется. { height: .., width: .. }
origin – Array – по умолчанию: ['middle','center']
Точка исчезновения, по умолчанию для show/hide
percent – Integer – по умолчанию: 0/100
Количество процентов.

Pulsate

$("#div1").click(function () {
  $(this).effect("pulsate", { times: 2 }, 1000);
});
$("#div2").click(function () {
  $(this).effect("pulsate", { times: 9 }, 50);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Опции:

times – Integer – по умолчанию: 5
Количество пульсаций.

Все использованные в примерах файлы, как и файл effects.core.js можно скачать в разделе download.

Надеюсь, что эта статья принесет пользу и поможет многим сделать свои приложения более динамичными.

Basics:

show()

возвращает: jQuery
Отображает каждый из элементов набора, если они были скрыты через вызов hide() или через display:none в таблице стилей. Действует подобно show(speed,[callback]), только без анимационных эффектов. Если элемент не был скрыт, то ничего не происходит.

Показываем все параграфы, которые были скрыты.

$("p").show();

Откройте пример в отдельном окне и посмотрите исходный код.

show(speed, [callback])

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

Показываем все скрытые параграфы. Используем в качестве параметра ключевое слово slow. При этом анимация выполняется в течение 600 миллисекунд.

$("button").click(function () {
  $("p").show("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Показываем все скрытые элементы div по порядку, используя ключевое слово fast. Каждая анимация занимает 200 миллисекунд и по завершении очередной стартует следующая.

$("#showr").click(function () {
  $("div:eq(0)").show("fast", function () {
    // use callee so don't have to name the function
    $(this).next().show("fast", arguments.callee);
  });
});
$("#hidr").click(function () {
  $("div").hide(2000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргумент speed – строка или число. Если передается строка, она может принимать предопределенные значения – «slow», «normal» или «fast». Число – длительность эффекта в миллисекундах, например 1000.
Аргумент callback – функция, вызываемая по завершении эффекта. Выполняется один раз для каждого элемента набора.

hide()

возвращает: jQuery
Скрывает каждый из элементов набора, если они отображались. Действует подобно hide(speed, [callback]), но без анимационных эффектов. Если элемент был скрыт – ничего не происходит.
В примере один параграф скрыт изначально, второй – скрывается кликом по ссылке.

$("p").hide();
$("a").click(function () {
  $(this).hide();
  return false;
});

Откройте пример в отдельном окне и посмотрите исходный код.

hide(speed, [callback])

возвращает: jQuery
Скрывает все элементы набора с использованием анимационных эффектов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Высота, ширина и прозрачность каждого элемента набора может быть изменена динамически, с определенной скоростью.

Скрываем все видимые параграфы. Используем в качестве параметра ключевое слово slow. При этом анимация выполняется в течение 600 миллисекунд.

$("button").click(function () {
  $("p").hide("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Кликом по кнопке Hide, скрываем все элементы span по порядку, используя ключевое слово fast. Каждая анимация занимает 200 миллисекунд и по завершении очередной стартует следующая.

$("#hidr").click(function () {
  $("span:last-child").hide("fast", function () {
    // use callee so don't have to name the function
    $(this).prev().hide("fast", arguments.callee);
  });
});
$("#showr").click(function () {
  $("span").show(2000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Скрываем элементы div по клику на них в течение 2 секунд и когда элемент уже скрыт, удаляем его. Попробуйте очень быстро покликать по div’ам.

for (var i = 0; i < 5; i++) {
  $("<div>").appendTo(document.body);
}
$("div").click(function () {
  $(this).hide(2000, function () {
    $(this).remove();
  });
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргумент speed – строка или число. Если передается строка, она может принимать предопределенные значения – «slow», «normal» или «fast». Число – длительность эффекта в миллисекундах, например 1000.
Аргумент callback – функция, вызываемая по завершении эффекта. Выполняется один раз для каждого элемента набора.

toggle()

возвращает: jQuery
Переключает отображение каждого из элементов набора. Если они были скрыты – отображает их и наоборот.

Переключаем параграфы с помощью кнопки.

$("button").click(function () {
  $("p").toggle();
});

Откройте пример в отдельном окне и посмотрите исходный код.

Sliding:

slideDown(speed, [callback])

возвращает: jQuery
Открывает все элементы набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации.

Открываем все элементы input, используя эффект «скольжения вниз». Время анимации 1000 мс. Как только анимация выполнена – вызывается функция, которая изменяет некоторые css-свойства элементов input. А в особенности среднего элемента, которому передается фокус.

$("div").click(function () {
  $(this).css({ borderStyle:"inset", cursor:"wait" });
  $("input").slideDown(1000,function(){
    $(this).css("border", "2px red inset")
           .filter(".middle")
           .css("background", "yellow")
           .focus();
    $("div").css("visibility", "hidden");
  });
});

Откройте пример в отдельном окне и посмотрите исходный код.

Открываем, «скользя вниз», все элементы div. Для задания времени используем ключевое слово «slow», т.е. открываем медленно.

$(document.body).click(function () {
  if ($("div:first").is(":hidden")) {
    $("div").slideDown("slow");
  } else {
    $("div").hide();
  }
});

Откройте пример в отдельном окне и посмотрите исходный код.

slideDown принимает те же аргументы, что и show или hide.

slideUp(speed, [callback])

возвращает: jQuery
Скрывает все элементы набора, используя изменение высоты элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации.

Скрываем все параграфы, используя эффект «скольжения вверх». Время анимации 2000 мс. Как только анимация выполнена – вызывается функция, которая покажет сообщение о том, какой именно параграф был скрыт.

$("button").click(function () {
  $(this).parent().slideUp("slow", function () {
    $("#msg").text($("button", this)
    .text() + " - сделано!");
  });
});

Откройте пример в отдельном окне и посмотрите исходный код.

Скрываем, «скользя вверх», все элементы div. Время не задаем. По умолчанию эффект будет выполнен примерно за 400 мс.

$(document.body).click(function () {
  if ($("div:first").is(":hidden")) {
    $("div").show("slow");
  } else {
    $("div").slideUp();
  }
});

Откройте пример в отдельном окне и посмотрите исходный код.

slideUp принимает те же аргументы, что и show или hide.

slideToggle(speed, [callback])

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

Скрываем и отображаем все параграфы.

$("button").click(function () {
  $("p").slideToggle("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Анимируем элементы div, находящиеся между разделителями.

$("button").click(function () {
  $("div:not(.still)").slideToggle("slow", function () {
    var n = parseInt($("span").text(), 10);
    $("span").text(n + 1);
  });
});

Откройте пример в отдельном окне и посмотрите исходный код.

slideToggle принимает те же аргументы, что и show или hide.

Fading:

fadeIn(speed, [callback])

возвращает: jQuery
Делает видимыми все элементы набора, используя изменение прозрачности элементов. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому «проявляемый» элемент уже должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.

«Проявляем» скрытые элементы div один за другим, каждый раз анимационный эффект занимает время примерно в 600 мс.

$(document.body).click(function () {
  $("div:hidden:first").fadeIn("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

«Проявляем» красный блок поверх текста. По завершении этой анимации запускается следующий эффект, который «проявляет» тэг span.

$("a").click(function () {
  $("div").fadeIn(3000, function () {
    $("span").fadeIn(100);
  });
  return false;
});

Откройте пример в отдельном окне и посмотрите исходный код.

fadeIn принимает те же аргументы, что и show или hide.

fadeOut(speed, [callback])

возвращает: jQuery
Делает невидимыми все элементы набора, используя изменение прозрачности элементов (эффект «затухания»). Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому скрываемый элемент должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.

Скрываем все параграфы, используя эффект «затухания». Продолжительность эффекта примерно 600 мс.

$("p").click(function () {
  $("p").fadeOut("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Проведите мышью над текстом. Кликните там, где при наведении курсора появится желтый бэкграунд. Это один из нескольких элементов span. По клику на нем он будет скрыт с использованием эффекта «затухания».

$("span").click(function () {
  $(this).fadeOut(1000, function () {
    $("div").text("'" + $(this).text() + "' has faded!");
    $(this).remove();
  });
});
$("span").hover(function () {
    $(this).addClass("hilite");
  }, function () {
    $(this).removeClass("hilite");
});

Откройте пример в отдельном окне и посмотрите исходный код.

fadeOut принимает те же аргументы, что и show или hide.

fadeTo(speed, opacity, [callback])

возвращает: jQuery
Делает невидимыми все элементы набора, используя изменение прозрачности элементов (эффект «затухания») до величины, указанной во втором аргументе. Опционально в аргументе callback может быть передана функция, которая будет вызвана по завершении анимации. Только прозрачность элемента может быть использована для этого эффекта, поэтому скрываемый элемент должен иметь какие-либо размеры, т.е. его высота и ширина должны быть определены.

Кликом на первом параграфе изменяем его прозрачность до 0.33. Эффект длится примерно 600 мс. Второй параграф не меняет прозрачность.

$("p:first").click(function () {
  $(this).fadeTo("slow", 0.33);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Меняем прозрачность элементов div случайным образом. Длительность эффекта примерно 200 мс.

$("div").click(function () {
  $(this).fadeTo("fast", Math.random());
});

Откройте пример в отдельном окне и посмотрите исходный код.

fadeTo принимает те же аргументы, что и show или hide. И кроме того второй аргумент opacity – число от 0 до 1, характеризующий «целевую» прозрачность элемента.

Custom:

animate(params, [duration], [easing], [callback])

возвращает: jQuery
Это функция для построения своей, пользовательской анимации. У этой функции один обязательный аргумент, представляющий собой объект состоящий из пар ключ/значение. В качестве ключа выступает CSS-свойство, которое должно быть анимировано (например: «height», «top», or «opacity»).

Обратите внимание, что свойства должны быть определены с использованием camel case (т.е. например marginLeft вместо margin-left).

В качестве значения выступает «целевое» значение соответствующего CSS-свойства. Например, если в качестве значения выступает какая-либо цифра, то соответвующее свойство будет трансформировано из своего текущего состояния, в новое состояние.

Обратите внимание, что поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или «hide», «show», «toggle»). Например backgroundColor не поддерживается.

Начиная с версии jQuery 1.2 можно определять значения свойств, используя «em» или %. Также начиная с версии jQuery 1.2 можно использовать «относительную» анимацию, т.е. определять значения соответствующего свойства относительно его текущей позиции (используя «+=» или «-=») чтобы передвигать элемент в положительную или отрицательную стороны.
Кликните по кнопке, чтобы запустить анимацию для элемента div.

$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});

Откройте пример в отдельном окне и посмотрите исходный код.

Пример «относительной» анимации. Покликайте несколько раз по кнопкам вправо/влево…

$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Аргументы, принимаемые этой функцией:
params – набор атрибутов стилей, которые Вы хотите анимировать.
duration (Optional) – строка, представляющая собой ключевое слово («slow», «normal», или «fast») или число, указываюее длительность эффекта в миллисекундах.
easing (Optional) – строка, представляющая собой имя эффекта плагина easing. Имеет два встроенных значения «linear» и «swing». Используется только с плагином.
callback (Optional) – функция, которая может быть вызвана по завершении анимации каждого элемента набора.

animate(params, options)

возвращает: jQuery
Это функция для построения своей, пользовательской анимации. Аргумент params представляет собой объект, состоящий из пар ключ/значение. В качестве ключа выступает CSS-свойство, которое должно быть анимировано (например: «height», «top», или «opacity»).

Обратите внимание, что свойства должны быть определены с использованием camel case (т.е. например marginLeft вместо margin-left).

В качестве значения выступает «целевое» значение соответствующего CSS-свойства. Например, если в качестве значения выступает какая-либо цифра, то соответвующее свойство будет трансформировано из своего текущего состояния, в новое состояние. Или же если значение представлено в виде строки («hide», «show», или «toggle»), анимация для этого свойства будет создана со значениями по умолчанию.
Отдельно стоит поговорить об аргументе options. В нем также может быть передана длительность соответствующего эффекта анимации (как с использованием числовых значений в миллисекундах, так и с помощью клюючевых слов). Также может быть использовано имя эффекта при использовании плагина easing. С помощью опции complete может быть вызвана функция, которая будет выполнена по завершении анимации для каждого элемента набора.
Обязательно надо упомянуть о queue (добавлено в jQuery 1.2). Он принимает значения true (по умолчанию) или false. Если установить queue:false, это даст возможность выполнить анимационный эффект вне очереди, параллельно со следующим эффектом (если такой есть конечно).

Посмотрите следующий пример – будет намного понятнее.
Первая кнопка как раз демонстрирует пример такой параллельной анимации. Некий элемент с идентификатором #block1 должен изменить свою ширину до 90% от возможной, шрифт должен быть установлен в размер 24px и правая рамка должна стать шириной 15px. Обратите внимание, что изменение ширины происходит одновременно с другими двумя эффектами, которые уже следуют друг за другом в порядке очереди.
Вторая кнопка запускает почти такую же анимацию, вот только все эффекты следуют друг за другом строго по очереди.

$("#go1").click(function(){
  $("#block1").animate( { width:"90%" },
             { queue:false, duration:3000 } )
    .animate( { fontSize:"24px" }, 1500 )
    .animate( { borderRightWidth:"15px" }, 1500);
});
$("#go2").click(function(){
  $("#block2").animate( { width:"90%"}, 1000 )
    .animate( { fontSize:"24px" } , 1000 )
    .animate( { borderLeftWidth:"15px" }, 1000);
});
$("#go3").click(function(){
  $("#go1").add("#go2").click();
});
$("#go4").click(function(){
  $("div").css({width:"", fontSize:"", borderWidth:""});
});

Откройте пример в отдельном окне и посмотрите исходный код.

stop()

возвращает: jQuery
Останавливает все выполняющиеся анимационные эффекты для всех элементов набора.

Кликните по кнопке Go, чтобы запустить анимацию. Затем по кнопке Stop, чтобы ее остановить. Ну а клик по кнопке Back запустит другой анимационный эффект – блок будет двигаться в обратную сторону. Заметьте, что отсчет будет вестить от той позиции в которой блок был остановлен.

// Запускаем анимацию
$("#go").click(function(){
  $(".block").animate({left: '+=100px'}, 2000);
});
// Останавливаем анимацию
$("#stop").click(function(){
  $(".block").stop();
});
// Запускаем в другом направлении
$("#back").click(function(){
  $(".block").animate({left: '-=100px'}, 2000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

queue()

возвращает: Array
Возвращает ссылку на очередь элемента (массив функций).

Разберите этот пример. По клику на кнопке мы получаем длину очереди в текущий момент.

$("#show").click(function () {
  var n = $("div").queue("fx");
  $("span").text("Длина очереди: " + n.length);
});
function runIt() {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").slideToggle(1000);
  $("div").slideToggle("fast");
  $("div").animate({left:'-=200'},1500);
  $("div").hide("slow");
  $("div").show(1200);
  $("div").slideUp("normal", runIt);
}
runIt();

Откройте пример в отдельном окне и посмотрите исходный код.

queue(callback)

возвращает: jQuery
Добавляет новую функцию, которая долна быть выполнена, в конец очереди для всех элементов набора.

В примере: очередь пользовательских функций.

$(document.body).click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});

Откройте пример в отдельном окне и посмотрите исходный код.

queue(queue)

возвращает: jQuery
Заменяет очередь для всех элементов набора новой очередью (массив функций).

В примере, по клику на кнопке Stop, устанавливается массив очереди, чтобы удалить текущую очередь. По клику на кнопке Start очередь запускается вновь.

$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});
$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
});

Откройте пример в отдельном окне и посмотрите исходный код.

dequeue()

возвращает: jQuery
Удаляет поставленную в конец очереди функцию, разрешая очереди продолжаться.

В примере dequeue используется, чтобы разрешить очереди продолжиться после использования queue(callback). Попробуйте убрать в примере строчку $(this).dequeue(); и Вы обнаружите, что анимация остановится после срабатывания toggleClass.

$("button").click(function () {
  $("div").animate({left:'+=200px'}, 2000);
  $("div").animate({top:'0px'}, 600);
  $("div").queue(function () {
    $(this).toggleClass("red");
    $(this).dequeue();
  });
  $("div").animate({left:'10px', top:'30px'}, 700);
});

Откройте пример в отдельном окне и посмотрите исходный код.

В общем про анимационные эффекты библиотеки jQuery вроде бы все.