title: How to hide elements (with smooth transition) by class with javascript?
body: <p>I have a group of divs that share the same <strong>class</strong> (<em>optionsclass</em>). The display is set to <strong>block</strong>. When a user clicks them the following javascript function is executed the display is changed to <strong>none</strong>.</p>
  
  <pre><code>function hideBlockElementsByClass(className)
  {
      var elements = document.getElementsByClassName(className);
      for(i in elements)
      {
          elements[i].style.display = "none";
      }
  }
  </code></pre>
  
  <p>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?</p>