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

Question

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

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

The transition between the display unit and nothing quite rude, and I would like to make a smoother transition. What is the best strategy for this?

Answer 1

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

Answer 2

While Sridhar gives a good CSS3 solution and the other is JQuery.

Here you can find a clean javascript / CSS solution:

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

Answer 3

Try this method

HTML

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

CSS

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

Script

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

Answer 4

try this in simple javascript: (Will work on IE10, chrome, firefox, safari, android, ios)

 <script> function hideBlockElementsByClass(className) { var elements = document.getElementsByClassName(className); console.log(elements.length) for (var i = 0; i < elements.length; i++) { (function (a) { elements[a].addEventListener('webkitTransitionEnd', function () { elements[a].style.display = "none"; }, false); elements[a].addEventListener('mozTransitionEnd', function () { elements[a].style.display = "none"; }, false); elements[a].addEventListener('oTransitionEnd', function () { elements[a].style.display = "none"; }, false); elements[a].addEventListener('transitionend', function () { elements[a].style.display = "none"; }, false); })(i); elements[i].style.webkitTransitionDuration = "1s"; elements[i].style.mozTransitionDuration = "1s"; elements[i].style.oTransitionDuration = "1s"; elements[i].style.transitionDuration = "1s"; elements[i].style.opacity = "0"; } } </script> 

Answer 5

My code is:

 <a href="javascript:ShowDiv('MyMesage');"> Click here</a> <div id="MyMesage" style="display:none;opacity:0; background-color:pink; margin:0 0 0 100px;width:200px;"> blablabla </div> <script> function ShowDiv(name){ //duration of transition (1000 miliseconds equals 1 second) var duration = 1000; // how many times should it should be changed in delay duration var AmountOfActions=100; var diiv= document.getElementById(name); diiv.style.display = 'block'; var counte=0; setInterval(function(){ counte ++; if ( counte<AmountOfActions) { diiv.style.opacity = counte/AmountOfActions;} }, duration / AmountOfActions); } </script>