javascript - javascriptを使用してクラスごとに要素を(スムーズな遷移で)非表示にする方法は?

Question

同じクラス( optionsclass ) を共有する div のグループがあります。ディスプレイはブロックに設定されています。ユーザーがそれらをクリックすると、次の JavaScript 関数が実行され、表示がnoneに変更されます。

function hideBlockElementsByClass(className)
{
    var elements = document.getElementsByClassName(className);
    for(i in elements)
    {
        elements[i].style.display = "none";
    }
}

表示ブロックとなしの遷移がかなり荒いので、もっとスムーズに遷移させたいです。これを達成するための最良の戦略は何ですか?

Answer 1

CSS3 を使用します。

.className { 
 opacity: 0; 
 visibility: hidden;
 -webkit-transition: visibility 0.2s linear,
 opacity 0.2s linear;
 -moz-transition: visibility 0.2s linear,
 opacity 0.2s linear;
 -o-transition: visibility 0.2s linear,
 opacity 0.2s linear; 
}

.className:hover { 
visibility: visible; 
opacity: 1; 
}

Answer 2

Sridhar は素敵な CSS3 ソリューションを提供し、他の言及は Jquery です。

ここでは、純粋な javascript/CSS ソリューションを見つけることができます。

https://codereview.stackexchange.com/questions/7315/fade-in-and-fade-out-in-pure-javascript

Answer 3

この方法を試してください

HTML

<div class = "image"  onclick = "eff()"></div>

CSS

    .transition {
        -moz-transition: 2s width;
        width: 150px;
        height: 100px;

    }

脚本

function eff() {
    var k = document.getElementsByClassName("image"); 
    k[0].className = "transition";
}