javascriptcss-transitionsfadeout

How to hide elements (with smooth transition) by class with javascript?

I have a group of divs that share the same class (optionsclass). The display is set to block. When a user clicks them the following javascript function is executed the display is changed to none.

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

The transition between display block and none is quite rough and I would like to make a smoother transition. What's the best strategy to accomplish this?

Solution

  • Use 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; 
}