Javascript의 ProcessMessages()

Question

div를 특정 높이로 떨어 뜨려 추가 내용을 표시하고 싶습니다. 이를 위해 나는 다음 드롭 박스() 함수를 쓴 :

<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.com/의 "사용 가능 여부 확인"과 같은 모양입니다. 이 일을 어떻게 성취합니까?

감사합니다.

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

Answer 2

브라우저 자바 스크립트에서 루핑 지연을 사용할 수 없기 때문에 브라우저가 입력 및 화면 업데이트에 응답하지 않게되고 모바일 장치에서 배터리가 낭비됩니다.

대신 나중에 일정 시간 동안 활동을 예약 할 수있는 setTimeout()을 사용해야합니다. 좋은 애니메이션은 다음 번 애니메이션 틱을 스케쥴하는 트위닝 알고리즘을 사용하고 경과 시간을 비교하여 다음 애니메이션 단계를 그려야하는 위치를 계산하며이 방식으로 지속적으로 자체 수정합니다.

javascript animation에 대한 Google 검색을 수행하면 일반 자바 스크립트로 애니메이션 작업을 수행하는 데 필요한 미리 작성된 코드가 많이 있습니다. 또한 모든 주요 자바 스크립트 라이브러리 (예 : 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/ 여기