Divをスムーズに展開する

Question

divを拡張するためにJavascriptを使用していますが、コンテンツが展開されているときには非常に突然です。私は、このdivをもっと遅くして、視覚的にBLAMを展開する方法があるのだろうかと思っていました。今私は終わった。

<script language="javascript"> 
function toggle_profile() { 
    var ele = document.getElementById("toggleProfile"); 
    var text = document.getElementById("displayProfile"); 
    if(ele.style.display == "block") { 
      ele.style.display = "none"; 
     text.innerHTML = "View Profile"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "Hide Profile"; 
    } 
} 
         </script> 

         <a id="displayProfile" href="javascript:toggle_profile();">View Profile</a></p> 
         <br /> 
        <div id="toggleProfile" style="display: none"> 

Answer 1

ホイールを再発明するのに本当に意味がありません。あなたはJqueryの滑り止めでこれをかなり簡単に行うことができます。こちらのページは以下のとおりです。http://api.jquery.com/slideToggle/

Answer 2

トリックは、追加や削除、JavaScriptでクラスを...そして、このようなCSS3トランジションを装着している：

div { 
    -webkit-transition: height .25s ease; 
     -moz-transition: height .25s ease; 
      transition: height .25s ease; 
} 

これは、あなたがすべての速度を制御することができトランジションを適用しますあなたのdivs。もちろん、どのDOM要素を自分に適用するかを選択できます。

そして、私が使用したい2つのjQueryの機能が

$("#object").addClass("removeThis"); //hide 
$("#object").removeClass("removeThis"); //show 

しかし、あなたはjQueryのを使用することはできません指摘したようです！だからここに！ 「#objectは」あなたがターゲットとしているオブジェクトであり、「.removeThis」

document.getElementById("object").className = ""; 
document.getElementById("object").className = "removeThis"; 

は、追加とDOMタグのクラス属性から削除されているクラスです。それはCSSのように見えるものをheres。

#object { 
    height: 200px; 
    /* ignoring other CSS */ 
} 

.removeThis { 
    height: 0; 
} 

これを上下にスライドさせると仮定します。別のトリックは、不透明度を使用するか、display：noneとdisplay：blockを使用することです。しかし、周り遊ぶ。私はこれが助けて欲しい！

2012年以降の編集： JavaScriptを使用しているため、主スレッドでの作業が必要になるため、コンポジットスレッドを代わりに使用してトランスフォームをアニメーション化できます。つまり、高さスタイルのプロパティをアニメートする方法を理解することができます。

Answer 3

私は、最高のトリックは、CSS overflow:hiddenプロパティを使用することです。これは、divの高さまたは幅の外にあるコンテンツを非表示にします。その後、スムーズなCSSの移行で、部門の高さを簡単に増減できます。

あなたはそれは間違いなく可能ですが、あなたはプレーンなJavaScriptを使用している場合は、タイマーのいくつかの並べ替えを使用して、幅または高さを変更することで、アニメーションを自分で作成する必要があると思いますthe tutorial here