Div의 높이 변경 속도를 늦추는 방법

버튼을 아래로 스크롤하여 Div를 페이지 상단에서 천천히 클릭하여 표시하려고합니다. 그러나 내가 지금 가지고있는 것을 가지고 할 때, 그것은 단지 매우 빠르게 나타나고 실제로 내려 가지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까?Div의 높이 변경 속도를 늦추는 방법

function showstuff(inquiryForm){ 
    document.getElementById(inquiryForm).style.visibility="visible"; 
    for (var i=0;i<300;i++) 
    { 
document.getElementById(inquiryForm).style.height= i + "px"; 
    } 
}

출처

2013-07-09 Anonymous

각 픽셀 증가를 지연 시키려면 setTimeout을 사용해야합니다. – r043v

어떻게하면됩니까? –

당신은 300 개 항목을 반복하고 있고 에서 getElementById와 요소를 찾기 위해 노력하고 선택한 항목

에게 스타일을 시도하고 그 프로세스가 정말 느리고 랙이하게 생각합니다.

출처

2013-07-09 00:11:39

var_t = setTimeout (function() {document.getElementById (inquiryForm) .style.height = i + "px"; } –

이런 종류의 물건이 종종 여기에 유용 할 수있는 편리한 간단한 양식 등 다양한 애니메이션 기능 포함으로, jQuery를 사용하여 처리됩니다 당신은 jQuery 라이브러리를 포함 일단

이

, 당신은 기능을 사용할 수 있습니다 이 같은 :

인수가

과 같이 MS에서 효과의 지속 시간입니다

$(inquiryForm).slideDown(500);

function showstuff(inquiryForm){ 
    $(inquiryForm).slideDown(500); 
}

출처

2013-07-09 00:12:11

페이지에서 jquery를 이미 사용하고 있는데이 항목으로 대체 할 수 있습니까? –

또한 jquery를 사용하여 이벤트를 버튼에 직접 바인딩 할 수 있습니다 (예 : $ ('# myButton')) on ('click', function() {$ ('# myFormContainer'), slideDown (500);})'여기서 #myButton은 버튼의 선택자이고 #myFormContainer는 표시 할 div의 선택자입니다. –

Here is an example that should help you understand the event loop,

및 setTimeout의 사용.

<div id="myDiv" style="width:10px;height:50px;background:#f00;"></div> 

<button class="btn" onclick="start();">Start</button> 
<button class="btn" onclick="stop();">Stop</button> 
<button class="btn" onclick="reset();">Reset<button> 

var timeout; 

function start() { 
    var div = document.getElementById("myDiv"); 
    var size = 10; 

    var func = function() { 
     timeout = setTimeout(func, 0); 
     div.style.width = size + "px"; 
     if (size++ == 600) stop(); 
    } 

    func(); // starts the process 
} 

function stop() { 
    clearInterval(timeout); 
} 

function reset() { 
    var div = document.getElementById("myDiv"); 
    div.style.width = "10px"; 
}

출처

2013-07-09 00:14:23 jeffo

Div의 높이 변경 속도를 늦추는 방법

답변

관련 문제