アニメーションのあるdivを表示する

Question

私はこのスクリプトを作成しました。これは適切なクラスでdivを開き、他のクラスを閉じます。

function showhide(id) { 
    if (document.getElementById) { 
    var divid = document.getElementById(id); 
    var divs = document.getElementsByClassName("hideable"); 
    for (var i = 0; i < divs.length; i = i + 1) { 
     divs[i].style.display = "none"; 
    } 
    divid.style.display = "block"; 
    } 
    return false; 
} 

表示オプションで表示するのではなく、フェードアウトのようなアニメーションを作成することはできますか？

Answer 1

この

function showhide(id) { 
    if (document.getElementById) { 
    var divid = document.getElementById(id); 
    var divs = document.getElementsByClassName("hideable"); 
    for (var i = 0; i < divs.length; i = i + 1) { 
     $(divs[i]).fadeOut("slow"); 
    } 
    $(divid).fadeIn("slow"); 
    } 
    return false; 
} 

このフィドルを見ては、jQueryライブラリが提供する、より多くの技術がありますが、「http://jsfiddle.net/9jtd3/」

、あなたもそのを見ている必要がありますがあります。

Answer 2

これは、jQueryなどのライブラリを使用して行うことができます。

あなたは確かにプレーンなjavascriptを使用することができますが、jQueryはすばらしいライブラリなので、それは何の意味もありません。

は確かにあなたの問題を解決しますshowとhide

Answer 3

Thisのいくつかの例を参照してください。

スクリプトにjQueryライブラリが含まれている場合は、直接.fadeOut（）を使用できます。あなたが試みることができる

Answer 4

あなたはjqueryのを使用している場合は、これを行うための別の方法は、divを

幸運のあなたのグループにクラス名として「hideable」と仮定すると、

function showhide(id) { 
    $(".hideable".fadeOut("slow"); 
    $("#" + id).fadeIn("slow"); 
} 

です。

Answer 5

これはCSSだけで簡単です。あなたはクラス

div { 
display:block; 
transition: all .2s ease-out; 
} 

.hidden { 
display:none; 
} 

とJavaScriptとを作る

、あなたが適用されますか、あなたがしたい時に隠されたクラスを削除します。 jQueryのアニメーションのlibは、使用するのにはまあまあです。それはclunky、あなたのユーザーのための食べ物をressource。 CSSは代わりにGPUで動作し、より流動的なアニメーションを可能にします。

Answer 6

あなたはjQueryののslideDown() and slidUp()

$(document.body).click(function() { 
    if ($("div:first").is(":hidden")) { 
    $("div").slideDown("slow"); 
    } else { 
    $("div").slideUp("slow"); 
    } 
});