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

Я работаю над карусели, которая фиксирует верхнюю часть страницы при прокрутке до определенной точки. Чтобы он хорошо выглядел, когда он был заблокирован, мне нужно сделать текущее выбранное изображение, размер остальных изображений, которые не выбраны. Я закончил его просто отлично, используя прямой 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);

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

источник

2014-01-08 Jack Sniper

Вы выполняете 'animate()' одновременно, что заставляет его замедлить, я думаю .. завершает анимацию после другого, не является опцией? –

Даже если я использую хотя бы один анимированный() его медленный, как собаку. Его файл 30kb .js, но я не думаю, что это было бы проблемой. –

Попробуйте использовать переход CSS вместо animate()? – enguerranws

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

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

источник

2014-01-08 15:38:51 LcSalazar

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

ответ

Смежные вопросы