Question

我已经定义了一个函数来将7个div设置为顶部。我试图使用stop（true，false）函数来停止所有元素。并通过再次调用该函数重新启动动画。请看下面的代码。问题是我调用函数重启动画后动画变得很慢。它会减慢几秒钟并再次变为正常速度。有谁知道原因。请帮忙！！！感谢

我的代码附在

下面

autoAnimate(5000);
$('#scroller_container').mouseenter(function(){
    $('#scroller .galleryThumb').stop(true, false);
});
$('#scroller_container').mouseleave(function(){
    autoAnimate(5000);
});

function autoAnimate(speed) {
    $('#scroller .galleryThumb:eq(0)')
        .animate({'top':'-122px'},speed,'linear',function(){
          if(!autoFlag) {
            index       = $('#scroller .galleryThumb:last').attr('id');
            index       = index.substr(5, index.length);
            index       = parseInt(index);
            index       = index + 1;
            autoFlag    = true;
          }
          if(index == numberOfAds) { index = 0; }

          $('#scroller .galleryThumb:eq(0)').remove();
          $('#scroller').append(adUnitContainer[index]);
          $('#scroller .galleryThumb:eq(6)').css('top','732px');
          index++;
          autoAnimate(speed);
    });
    $('#scroller .galleryThumb:eq(1)').animate({'top':'0px'},speed,'linear');
    $('#scroller .galleryThumb:eq(2)').animate({'top':'122px'},speed,'linear');
    $('#scroller .galleryThumb:eq(3)').animate({'top':'244px'},speed,'linear');
    $('#scroller .galleryThumb:eq(4)').animate({'top':'366px'},speed,'linear');
    $('#scroller .galleryThumb:eq(5)').animate({'top':'488px'},speed,'linear');
    $('#scroller .galleryThumb:eq(6)').animate({'top':'610px'},speed,'linear');
}

Answer 1

如果你有一个5秒的动画并且你在中间停止它然后你重新启动相同的动画，动画的最后一个点相同，你告诉它运行5秒，它会变慢，因为它少了距离5秒钟。

如果您希望以之前相同的速度重新启动，那么您必须减少第二个动画中的时间量，以反映按比例分配的时间。

记住speed = distance / time。如果您重新启动的动画距离较短但行程相同，则速度会变慢，除非您按比例缩短时间。

调用停止并重启后，jQuery动画变慢

1 个答案: