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

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

$(document).ready(function() {
  var spacing = 140;
  
  $('#featured-books').css({
    'width': spacing * 3,
    'height': '166px',
    'overflow': 'hidden'
  }).find('.covers a').css({
    'float': 'none',
    'position': 'absolute',
    'left': 1000
  });

  var setUpCovers = function() {
    var $covers = $('#featured-books .covers a');

    $covers.unbind('click');

    // Левое изображение - сдвинуть вправо
    // (чтобы просмотреть изображения слева).
    $covers.eq(0)
      .css('left', 0)
      .click(function(event) {
        $covers.eq(0).animate({'left': spacing}, 'fast');
        $covers.eq(1).animate({'left': spacing * 2}, 'fast');
        $covers.eq(2).animate({'left': spacing * 3}, 'fast');
        $covers.eq($covers.length - 1)
          .css('left', -spacing)
          .animate({'left': 0}, 'fast', function() {
            $(this).prependTo('#featured-books .covers');
            setUpCovers();
          });

        event.preventDefault();
      });

    // Правое изображение - сдвинуть влево
    // (чтобы просмотреть изображения справа).
    $covers.eq(2)
      .css('left', spacing * 2)
      .click(function(event) {
        $covers.eq(0)
          .animate({'left': -spacing}, 'fast', function() {
            $(this).appendTo('#featured-books .covers');
            setUpCovers();
          });
        $covers.eq(1).animate({'left': 0}, 'fast');
        $covers.eq(2).animate({'left': spacing}, 'fast');
        $covers.eq(3)
          .css('left', spacing * 3)
          .animate({'left': spacing * 2}, 'fast');

        event.preventDefault();
      });

    // Центральное изображение.
    $covers.eq(1)
      .css('left', spacing);
  };

  setUpCovers();
});

    В случае щелчка на левом изображении мы можем переместить все три видимых изображения вправо на ширину одного изображения (используя переменную spacing, которая была определена ранее). В этой части все просто, но нам также необходимо переместить в область просмотра новое изображение. Для этого мы берем изображение в конце очереди и сначала устанавливаем его в позицию, находящуюся непосредственно за левым краем экрана (-spacing). Затем перемещаем его в область просмотра вместе с другими элементами, как показано на рисунке 1.

Рис.1. Перемещение изображений с воспроизведением анимационного эффекта

    Несмотря на то, что анимационный эффект выполняет перемещение, нам по-прежнему необходимо изменить порядок следования изображений повторным вызовом функции setUpCovers(). Если этого не сделать, следующий щелчок мышью будет обрабатываться неправильно. Так как функция setUpCovers() изменяет позиции изображений на экране, нам следует отложить вызов функции, дождавшись завершения воспроизведения анимационного эффекта, поэтому мы поместили этот вызов в функцию обратного вызова для анимационного эффекта.

    Щелчок на самом правом изображении выполняет похожую последовательность анимационных эффектов, только в обратном порядке. На этот раз за границу области просмотра смещается самое левое изображение, и оно должно быть перемещено в конец очереди до того, как по завершении анимационного эффекта будет вызвана функция setUpCovers(). Напротив, изображение справа должно переместиться в новую позицию (spacing * 3) до того, как начнется воспроизведение анимационного эффекта.

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

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