jQuery响应时间慢

debugcn 发表于 Dev

Zheng Wang

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

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

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

谢谢

 // 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变慢的原因）。

解决方案：如果动画仍在播放-不要滚动

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。