Пролистывайте изображения при наведении, нерегулярная скорость анимации - PullRequest
Новая
       10

Пролистывайте изображения при наведении, нерегулярная скорость анимации

0 голосов
/ 30 мая 2011

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

Ссылка: Здесь приведен справочный сайт , чтобы увидеть аналогичный эффект.(наведите курсор мыши на блок изображения).

HTML: 

<div id="flicker">
    <img src="example1.gif" />
    <img src="example2.gif" />
    <img src="example3.gif" />
</div>

Код: 

var flickerImg = jQuery('#flicker img');

jQuery('#flicker').hover(
      function() {
        flicker = setInterval(function() {
          if (flickerImg.last().hasClass('active')) {
            flickerImg.removeClass('active').first().addClass('active');
          }
          else {
            jQuery('#flicker img.active').removeClass('active')
                                         .next().addClass('active');
          }
       }, 100);
    },
    function() { 
        clearInterval(flicker); 
    });

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

1 Ответ

3 голосов
/ 01 июня 2011

Я настроил пример того, как я мог бы сделать это для имитации ссылочного сайта на http://jsfiddle.net/brianflanagan/kLJd3/. Я не уверен, что вижу ускорение, которое вы испытываете, хотя иногда это было чувствую как будто он ускоряется.Я оставил его включенным на 5 минут или около того, чтобы посмотреть, сохранился ли эффект, но это не так.Я подозреваю, что это может быть скорее оптическим обманом, чем что-либо еще.Я тестировал в Chrome 11 и пробовал разные настройки интервала, чтобы увидеть, имеет ли он какое-то значение, но, похоже, он выполнялся последовательно для меня независимо от интервала.

...