CODEWITHSUNDEEP
javascripthtml
Gova DEster
Gova DEster

Reputation: 43

How to use javascript to slowdown a div transiton?

html

 <li onClick="changeHeight();" >Project Info</li>

 <div id="content-about-project" style="width: 100%; border:1px solid gray;">
content
  </div>

Js

function changeHeight() {
document.getElementById('content-about-project').style.height = "600px"
}

What code does so far..

The user clicks the link (a) and the js function is called, when this happens the div's height extends 600px;

My question

How do i slow down div when its extending its height. right now its blazing fast and im not really liking that.

Upvotes: 3

Views: 62

Answers (3)

JMP
JMP

Reputation: 4467

Use the JavaScript function setTimeout.

<li onClick="changeHeight();">
    Project Info
</li>

<div id="content-about-project" style="width: 100%; border:1px solid gray;">
    content
</div>

<script>

    newHeight=50;
    function changeHeight() {
        if (newHeight<600) {
            newHeight+=5;
            document.getElementById('content-about-project').style.height = newHeight+"px";
            setTimeout(changeHeight,5);
        }
    }
      
</script>

Upvotes: 1

TJcobra
TJcobra

Reputation: 49

You achieve this with css.

Rather than giving the in-line style , Append a class with the values.

Use min-height instead of height.

And make transition with css

Upvotes: 1

prasanth
prasanth

Reputation: 22500

Try with classList.toggle() function .Its better with direct css property change in dom .And use transition for slow down effect 

function changeHeight() {
document.getElementById('content-about-project').classList.toggle('expand')
}
.normal{

transition:all 0.5s ease-in;
height:15px;
}
.expand{
height:600px;
}
 <li onClick="changeHeight();" >Project Info</li>

 <div id="content-about-project"  class="normal" style="width: 100%; border:1px solid gray;">
content
  </div>

Upvotes: 1

Related Questions