Анимация, вызванная прокруткой, очень медленная

Question

Анимация, вызванная прокруткой, очень медленная

0

Я работаю над карусели, которая фиксирует верхнюю часть страницы при прокрутке до определенной точки. Чтобы он хорошо выглядел, когда он был заблокирован, мне нужно сделать текущее выбранное изображение, размер остальных изображений, которые не выбраны. Я закончил его просто отлично, используя прямой css, но я предпочел бы анимацию сделать более плавный переход. У меня есть следующий код, но он очень медленный. Я имею в виду ДЕЙСТВИТЕЛЬНО slooooow. Он должен принимать 0,2 секунды, но это занимает около 20 секунд, а иногда и дольше. Я здесь что-то не так?

HTML -

<li class="active" style="width: 282px; margin-top: 0px;">
 <a data-slideindex="0" href="#">
  <div class="carousel-photo faded" style="height: 282px; width: 282px; background-image: url("images/photos/featured11.jpg");">
    <img class="photo" src="images/photos/featured11.jpg" style="display: none;">
  </div>
  <span class="name" style="width: 282px; font-size: 2.25em; margin-top: 15px; text-transform: uppercase;">John Doe</span>
  <span class="member-date" style="width: 282px; font-size: 1em;">11/26/2002</span>
 </a>
</li>

jQuery -

  $('.carousel-wrap .active').animate({ width: '155px', marginTop: '64px', marginRight: '0px' }, 200);
  $('.carousel-wrap .active .carousel-photo').animate({'height': '155px', 'width': '155px'}, 200);
  $('.carousel-wrap .active .name').animate({ width: '155px', fontSize: '.9375em', marginTop: '8px', 'text-transform': 'none'}, 200);
  $('.carousel-wrap .active .name').css({ 'text-transform': 'none' });
  $('.carousel-wrap .active .member-date').animate({ width: '155px', fontSize: '.75em' }, 200);

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

Jack Sniper 08 янв. 2014, в 16:14

Источник

0

вы выполняете animate() одновременно, что делает его медленным, я думаю .. заканчивать анимацию за другой не вариант?
Mp de la Vega 08 янв. 2014, в 15:12
0

Даже если я использую хотя бы одну анимацию (), она медленная как собака. Это 30-килобайтный файл .js, но я не думаю, что это будет проблемой.
Jack Sniper 08 янв. 2014, в 15:21
0

Попробуйте использовать CSS переход вместо animate ()?
enguerranws 08 янв. 2014, в 15:26

Показать ещё 1 комментарий

Теги:

jquery

html

css

carousel

jquery-animate

1 ответ

Ещё вопросы

вы выполняете animate() одновременно, что делает его медленным, я думаю .. заканчивать анимацию за другой не вариант?
Даже если я использую хотя бы одну анимацию (), она медленная как собака. Это 30-килобайтный файл .js, но я не думаю, что это будет проблемой.
Попробуйте использовать CSS переход вместо animate ()?

LcSalazar · Answer 1 · 2014-01-08T13-33-00.000Z

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

$('.carousel-wrap .active').stop().animate({ width: '155px', marginTop: '64px', marginRight: '0px' }, 200);