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);

滚动触发的动画非常慢

1 个答案: