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

Question

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?

You could try transitioning the `opacity` property rather than `display` (and obviously change the JS accordingly too). — James Allardice, Oct 31 '13 at 12:10
People are forgetting how Javascript works, with all these simple Jquery solutions. In my opinion learn Javascript first before JQuery, so let's give him a javascript answer he asks ofr ;) — Timmetje, Oct 31 '13 at 12:14
You could add a class and use CSS3 transition on the list items.. then your animation can be achieved different ways (opacity, height..), the problem with jquery transition is they are not smooth outside of desktop browsers — veksen, Oct 31 '13 at 12:14
Use CSS3 : http://bavotasan.com/2011/a-simple-fade-with-css3/ — Ankit Tyagi, Oct 31 '13 at 12:15
I need pure javascript/css solution for now. With jQuery is just $(".optionsclass").fadeOut(1000); — MrQ, Oct 31 '13 at 12:15
http://stackoverflow.com/questions/4644673/hide-all-elements-with-class-using-plain-javascript — , Oct 31 '13 at 12:27

score 6 · Accepted Answer · answered Oct 31 '13 at 12:21

6

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

answered Oct 31 '13 at 12:21

Ankit Tyagi

2,381
10
19

Simple yet effective! Thanks. Just needed to replace elements[i].style.display = "none"; to elements[i].className += " className"; and add the class to the css and works fine. – MrQ Oct 31 '13 at 12:37

score 1 · Answer 2 · edited Apr 13 '17 at 12:40

1

While Sridhar gives a nice CSS3 solution and other mention Jquery.

Here you can find a pure javascript/CSS solution:

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

edited Apr 13 '17 at 12:40

Community

1
1

answered Oct 31 '13 at 12:20

Timmetje

7,641
18
36

For pure javascript the link you gave its great.Thanks – MrQ Oct 31 '13 at 12:35

score 0 · Answer 3 · answered Oct 31 '13 at 12:15

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

Vicky Gonsalves · Answer 4 · 2013-10-31T12:31:09.597

try this in plain 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>

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

4 Answers4

Linked