0

追加のコンテンツを表示するために、特定の高さまで div をドロップしたいと考えています。そのために、次の dropbox() 関数を書きました。

  <script type="text/javascript">
  function sleep(milliseconds) {
        var start = new Date().getTime();
        for (var i = 0; i < 1e7; i++) {
          if ((new Date().getTime() - start) > milliseconds){
          break;
          }
        }
      }

  function dropbox(element){
    var obj = document.getElementById(element);
    if(obj) {
      var element = document.getElementById(element),
          style = window.getComputedStyle(element),
          height = style.getPropertyValue('height');
          height = height.substring(0,2);
      var i = 0;
      for (i = height; i<200; i++)
        {
        sleep(100);
        var tst = i+"px";
        //alert(tst);
        obj.style.height = tst;
        }
        //alert(i);

    } else {
    }
  }
  </script>

今私が経験している問題は、ロールダウンプロセス中にボックスが実際に表示されず、ループが完了した後にのみ表示されることですが、 http://www.thedanaの「Check Availability」ボックスのように見せたいです。 .com/ . どうすればこれを達成できますか?

ありがとうございました！

4

2 に答える 2

1

これがサンプルコードです。それはあなたを助けるかもしれません

<div class="right_content">

         We deliver quick and easy registration.
        Mysites.com is our hosting server and we've buit our website under observation of Mysite.com

      </div>
        <p class="flip">Know About us</p>
     </div>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
    </script>
   <script type="text/javascript"> 
    $(document).ready(function(){
    $(".flip").mouseover(function(){
        $(".right_content").slideToggle("slow");
      });
    });
  </script>
于 2012-10-04T04:59:11.440 に答える
1

ブラウザのJavaScriptでループ遅延を使用することはできません。これは、ブラウザが入力と画面の更新の両方に応答しなくなり、モバイルデバイスのバッテリーを浪費するためです。

代わりにsetTimeout()、将来のある時点でアクティビティをスケジュールできるようにするを使用する必要があります。優れたアニメーションは、アニメーションの次のティックをスケジュールするトゥイーンアルゴリズムを使用し、経過時間を比較して、次のアニメーションステップを描画する場所を計算し、この方法で継続的に自己修正します。

また、Googleでを検索するとjavascript animation、プレーンなJavaScriptを使用してアニメーションを作成するための便利なコードが多数見つかります。さらに、すべての主要なjavascriptライブラリ（jQueryやYUIなど）には、重要なアニメーション機能が組み込まれており、すでに作成されています。

簡単な例を次に示します。

function dropbox(elem, finalHt, duration) {
    var start = new Date().getTime();
    var tick = 20;
    var startHt = parseInt(elem.style.height, 10);
    var growHt = finalHt - startHt;

    function next() {
        var now = new Date().getTime();
        var percent = (now - start) / duration;
        var target = Math.round(startHt + (growHt * percent));
        elem.style.height = Math.min(target, finalHt) + "px";
        if (target < finalHt) {
            setTimeout(next, tick);
        }
    }

    setTimeout(next, tick);
}


function run() {
    var item = document.getElementById("box"); 
    item.style.height = "10px";    
    dropbox(item, 300, 2000);
}

実例とより一般化されたコード：http：//jsfiddle.net/jfriend00/QxXMK/

于 2012-10-04T04:53:32.973 に答える