jQuery响应时间慢 [英] Jquery slow reaction time

问题描述

我尝试将jQuery用于标题动画，添加后动画会变慢:

I try to use the jQuery for my header animation, the animation slows down after I added:

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

我必须等待几秒钟才能完成动画的第二部分.这段代码有什么问题吗?

I have to wait a couple of seconds for the second part of animation. Is there anything wrong with this code?

谢谢

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

推荐答案

好吧..您正在调用滚动侦听器，该滚动侦听器在滚动时每隔一段时间出现一次.但您也可以播放滚动缓慢的动画.当您通过滚动调用滚动侦听器时，会创建多个nimation调用，尝试一次全部播放(这就是为什么会降低ui的原因).

well.. you are calling the scroll listener which occurs evry moment while you are scrolling. but you also play an animation which is relatevly slow to scroll. when you call the scroll listener by scrolling, you create multiple nimations calls which try to play all at once (and that is why it slows down the ui).

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

the solution: if animation still played - don't scroll

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响应时间慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！