堆棧內存溢出
  簡體   English   中英

為什么這個動畫不穩定，有時會在執行之前有很長的延遲？

[英]Why is this animation choppy and sometimes have long delay before it executes?

 原文  2012-01-06 23:23:30  6   1    javascript/ jquery/ jquery-animate

問題描述

這個jquery動畫在firefox中非常不穩定，在firefox和chrome中它經常會在實際開始動畫之前有明顯的延遲（約1秒）（如果我在調用onclick處理程序時將代碼寫入控制台，那將會立即出現，但動畫調用將有延遲）。 這種延遲不是每次都有，但如果你點擊5-6次，你至少會看到一次。 

<!doctype html>
<html>
    <head>
    <title>Test Lag</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

    <style>
        .base
        {
            position: absolute;
            top: 507px;
            left: 0px;
            width: 1000px;
            height: 40px;
            z-index: 0;
        }

        .one
        {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 994px;
            height: 34px;
            background-color: #ffffff;
            border: solid 1px #505050;
            z-index: 3;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .oneA
        {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 966px;
            height: 6px;
            margin: 10px;
            background-color: #999999;
            border: solid #cccccc 4px;

        }

        .two
        {
            position: absolute;
            top: 1px;
            left: 1px;
            width: 996px;
            height: 36px;
            background-color: #e8e8e8;
            border: solid 1px #505050;
            z-index: 2;
            opacity: 0.25;
            filter: alpha(opacity=25);
        }

        .three
        {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 998px;
            height: 38px;
            background-color: #e8e8e8;
            border: solid 1px #505050;
            z-index: 1;
            opacity: 0.12;
            filter: alpha(opacity=12);
        }

        .four
        {
            position: absolute;
            top: 17px;
            left: 17px;
            width: 966px;
            height: 6px;
            background-color: #e8e8e8;
            z-index: 0;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .five
        {
            position: absolute;
            top: 17px;
            left: 17px;
            width: 966px;
            height: 366px;
            z-index: 4;
            overflow: hidden;
        }
    </style>
    </head>
    <body>

    <div id ="base" class="base">
        <div id="one" class="one">
        <div id="oneA" class="oneA"></div>
        </div>
        <div id="two" class="two"></div>
        <div id="three" class="three"></div>
        <div id="four" class="four"></div>
        <div id="five" class="five">There's some text in here.</div>
    </div>

    <script>
       var isOn = false;

       var jq_base = $('#base');
       var jq_one = $('#one');
       var jq_oneA = $('#oneA');
       var jq_two = $('#two');
       var jq_three = $('#three');
       var jq_four = $('#four');

       var baseTop = 96;
       var baseStartTop =507;

       var baseHeight = 400;
       var oneHeight = 394;
       var oneAHeight = 366;
       var twoHeight = 396;
       var threeHeight = 398;
       var fourHeight = 366;

       var baseStartH = 40;
       var oneStartH = 34;
       var oneAStartH = 6;
       var twoStartH = 36;
       var threeStartH = 38;
       var fourStartH = 6

       document.onclick = function()
       {
           //It's opened
           if ( isOn )
           {
               jq_one.animate( { height: oneStartH }, { duration: 300, queue: false } );
               jq_oneA.animate( { height: oneAStartH }, { duration: 300, queue: false } );
               jq_two.animate( { height: twoStartH }, { duration: 300, queue: false } );
               jq_three.animate( { height: threeStartH }, { duration: 300, queue: false } );
               jq_four.animate( { height: fourStartH }, { duration: 300, queue: false } );
               jq_base.animate(
                   { height: baseStartH },
                   {
                       duration: 300,
                       queue: false,
                       step: function (now)
                       {
                           if ( now <= ( baseStartH + 10 ) ) jq_base.animate( { top: baseStartTop }, 800 );
                       }
                   }
               );

               isOn = false;
           }

           //It's closed
           else
           {
               jq_base.animate(
                   { top: baseTop },
                   {
                       duration: 800,
                       step: function (now)
                       {
                           if ( now <= 100 )
                           {
                               jq_base.animate( { height: baseHeight }, { duration: 300, queue: false } );
                               jq_one.animate( { height: oneHeight }, { duration: 300, queue: false } );
                               jq_oneA.animate( { height: oneAHeight }, { duration: 300, queue: false } );
                               jq_two.animate( { height: twoHeight }, { duration: 300, queue: false } );
                               jq_three.animate( { height: threeHeight }, { duration: 300, queue: false } );
                               jq_four.animate( { height: fourHeight }, { duration: 300, queue: false } );
                           }
                       }
                   }
               );
               isOn = true;
           }
       }
    </script>
    </body>
</html>

演示： http ： //jsfiddle.net/fnswz/

1 個解決方案

解決方案1
 2  2012-01-06 23:52:24

我認為問題出在if (isOn)分支的以下部分： 

  jq_base.animate(
      { height: baseStartH },
      {
          duration: 300,
          queue: false,
          step: function (now)
          {
              if ( now <= ( baseStartH + 10 ) )
                 jq_base.animate( { top: baseStartTop }, 800 );
          }
      }
  );

具體來說，在該特定animate()調用的step函數中，您啟動另一個具有相當長的持續時間（800ms）的動畫，並且因為它在該step ，即使使用if測試，您也會以這么長的持續時間開始多個動畫。

這意味着，雖然過程達到它看起來完成，因為一切都已經移動到其最終位置，在幕后這些額外的動畫還沒有完成運行，所以它並沒有后續的點擊正確響應的一個點。 如果你將800毫秒動畫從step功能中移出並簡單地將其放在后面，它似乎可以使一切工作更加順暢。 （至少，在Chrome中看起來好多了：正如我在上面的評論中所說，我在這台計算機上沒有FF，所以我無法測試。）

這是我正在談論的變化的演示： http ： //jsfiddle.net/fnswz/1/

您可能想要在啟動animationRunning時設置標志animationRunning ，然后使用animate()的complete回調取消設置它，這樣您就可以測試標志並忽略點擊直到當前動畫完成，但只是上面的更改了對我來說有很大改善。

（順便問一下，為什么你在使用jQuery時使用document.onclick = ... ？）

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 為什么動畫長時間抖動或不連貫？ 延遲執行JavaScript 動畫回調在完成之前執行 為什么我的背景幻燈片動畫在兩次更改之間會有延遲？ 為什么這個動畫只在第一步之后有延遲？ jQuery 在去抖方法執行前調用 animation 為什么animationend / webkitAnimationEnd事件在調用之前會有延遲？ 為什么jQuery UI手風琴打開/關閉動畫如此不穩定？ CKEditor未加載：有時在加載所需的JS文件之前執行代碼 不穩定的畫布動畫-EaselJS
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM