jquery - 滚动触发的动画很慢

Question

我正在开发一个旋转木马，它会在滚动到某个点时锁定页面顶部。为了让它在锁定时看起来不错，我需要制作当前选定的图像，以及未选定的其他图像的大小。我已经使用直接的 css 很好地完成了它，但我宁愿有一个动画来实现更平滑的过渡。我有以下代码，但速度非常慢。我的意思是真的很慢。它设置为需要 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);

当滚动经过一个点时触发，但设置为只执行一次，因此它不会被多次调用。

Answer 1

你如何设置它被触发？你确定它只被调用过一次吗？即便如此，在使用由事件调用的动画时，最好停止可能仍在元素上运行的任何先前动画。你可以这样做:

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