Question

我想将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>

现在我遇到的问题是，在滚动过程中该框实际上是不可见的，但仅在循环完成后才显示但我希望它看起来像{{3}上的“检查可用性”框}。我如何实现这一目标？

谢谢！

Answer 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/

Answer 2

以下是示例代码。它可以帮助你

<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>

Javascript中的ProcessMessages（）

2 个答案: