Question

我尝试将jQuery用于我的标题动画，添加后，动画速度变慢了：

else if (headeranimated && $(this).scrollTop() > 1200)
else if (headeranimated2 && headeranimated && $(this).scrollTop() < 1000)

我必须等几秒钟来制作动画的第二部分。这段代码有什么问题吗？

谢谢

＆＃13;

 // header animation
var headeranimated2 = false;
var headeranimated = false;
var headeranimated3 = false;

$(window).scroll(function() {
  if ($(window).width() > 800) {
    if (!headeranimated && $(this).scrollTop() > 500) {
      $('#headerpattern').animate({
        left: "-40%"
      }, 800);
      headeranimated = true;
    } else if (headeranimated && $(this).scrollTop() > 1200) {
      $('#headerpattern').animate({
        top: "-20%"
      }, 200);
      headeranimated2 = true;
    } else if (headeranimated2 && headeranimated && $(this).scrollTop() < 1000) {
      $('#headerpattern').animate({
        top: "0"
      }, 200);
      headeranimated2 = false;
      headeranimated3 = true
    } else if (headeranimated3 && !headeranimated2 && $(this).scrollTop() < 400) {
      $('#headerpattern').animate({
        left: "0"
      }, 800);
      headeranimated = false;
      headeranimated3 = false;
    }
  } else {
    if (!headeranimated && $(this).scrollTop() > 500) {
      $('#headerpattern').animate({
        top: "-8%"
      }, 1200);
      headeranimated = true;
    } else if (headeranimated && $(this).scrollTop() < 400) {
      $('#headerpattern').animate({
        top: "0"
      }, 800);
      headeranimated2 = false;
    }
  }
});

＆＃13;

Answer 1

scroll偶数是滚动时连续发出的事件，因此在滚动时会每秒触发多次。

每当您为元素调用.animate时，动画都会添加到队列中。动画按照添加到队列中的顺序依次执行。由于您的动画的持续时间范围为200到1200，因此您可能会生成一个持续时间为几秒的动画队列。

一种解决方案是在致电.stop()之前致电.animate：

$('#headerpattern').stop().animate(....)

但这可能会破坏你想要的效果。

另一个解决方案是检查当前是否有动画正在运行，如果是，则不要启动新动画。但这将有某种停止并转到或延迟效果。

Answer 2

嗯..你正在调用滚动监听器，当你滚动时会发生这种情况。但是你也会播放一个动画相关的动画。当您通过滚动调用滚动侦听器时，您会创建多个nimations调用，这些调用尝试一次播放（这就是为什么它会减慢ui的速度）。

解决方案：如果动画仍在播放 - 请勿滚动

var animScroll;

$(window).scroll(function()
{
    if (animScroll) return;

    if ($(window).width() > 800)
    {       
       if (!headeranimated && $(this).scrollTop() > 500) 
       {
         animScroll = true;
         $('#headerpattern').animate({ left: "-40%"}, 800, function()
         {
            animScroll = false;
         });

         headeranimated = true;
     }

     // rest of code

Jquery反应时间慢

2 个答案: