На этом шаге мы рассмотрим создание анимации увеличения изображения.

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

    Для этого необходимо определить начальные координаты анимационного эффекта, то есть координаты центрального изображения. Для вычисления этих координат необходимо выполнить обход дерева DOM с использованием обычного JavaScript, но библиотека jQuery обеспечивает более простой способ. Метод .offset() возвращает объект, содержащий координаты top и left элемента относительно страницы. Затем мы можем вставить в этот объект значения свойств width и height изображения и получить информацию о позиционировании в виде аккуратного пакета.

        var startPos = $(this).offset();
        startPos.width = $(this).width();
        startPos.height = $(this).height();

    Теперь из этих координат можно легко вычислить конечные координаты. Мы сохраним их в виде такого же объекта.

        var endPos = {};
        endPos.width = startPos.width * 3;
        endPos.height = startPos.height * 3;
        endPos.top = 100;
        endPos.left = ($('body').width() - endPos.width) / 2;

    Затем можно использовать эти два объекта как отображения атрибутов CSS для передачи таким методам, как .css() и .animate().

        $enlargedCover.attr('src', $(this).attr('href'))
          .css(startPos)
          .show()
          .animate(endPos, 'normal', function() {
            $enlargedCover
              .one('click', function() {
                $closeButton.unbind('click').hide();
                $priceBadge.hide();
                $enlargedCover.fadeOut();
              });
            $closeButton
              .css({
                'left': endPos.left,
                'top' : endPos.top
              })
              .show()
              .click(function() {
                $enlargedCover.click();
              });
            $priceBadge
              .css({
                'right': endPos.left,
                'top' : endPos.top
              })
              .text(price)
              .show();
          });

    Обратите внимание, что кнопку Close и ценник нельзя отображать, пока не завершится воспроизведение анимационного эффекта, поэтому мы переместили соответствующий программный код внутрь функции обратного вызова метода .animate(). Кроме того, мы воспользовались этим обстоятельством, чтобы упростить вызовы метода .css() для обоих элементов, повторно применив информацию о позиционировании, вычисленную для увеличенного изображения.

    Теперь изображение плавно увеличивает свои размеры, как показано на рисунке 1.

Рис.1. Реализация анимационного эффекта

    На следующем шаге мы рассмотрим задержку воспроизведения анимационных эффектов до окончания загрузки изображения.

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