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
– James Allardice, Commented Oct 31, 2013 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
– Timmetje, Commented Oct 31, 2013 at 12:14
I need pure javascript/css solution for now. With jQuery is just $(".optionsclass").fadeOut(1000); — MrQ
– MrQ, Commented Oct 31, 2013 at 12:15

Ankit Tyagi · Accepted Answer · 2013-10-31 12:21:07Z

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, 2013 at 12:21

Ankit Tyagi

2,37511 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MrQ Over a year ago

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.

Community · Accepted Answer · 2017-04-13 12:40:36Z

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, 2017 at 12:40

CommunityBot

11 silver badge

answered Oct 31, 2013 at 12:20

Timmetje

7,70521 silver badges36 bronze badges

1 Comment

MrQ Over a year ago

For pure javascript the link you gave its great.Thanks

Sridhar R · Accepted Answer · 2013-10-31 12:15:25Z

0

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

answered Oct 31, 2013 at 12:15

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Comments

Vicky Gonsalves · Accepted Answer · 2013-10-31 12:31:09Z

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>

Lajos Arpad · Accepted Answer · 2023-09-16 12:59:08Z

0

You can combine CSS transitioning with your Javascript events:

const block=document.querySelector('.block');

block.addEventListener('click',function(){
this.classList.add('hidden');
})

.container{
  position:retlative
}
.block{
  transition: visibility 0.2s linear,opacity 0.3s linear;
  cursor:pointer;
}
.hidden{
  position: absolute;
  top:0;
  left: 0;
  opacity: 0;
  visibility:hidden;
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
      <div class='container'>
        <div class='block' title='click me'>
        click me
        </div>
      </div>
   </body> 
</html>

edited Sep 16, 2023 at 12:59

Lajos Arpad

80.4k42 gold badges123 silver badges234 bronze badges

answered Sep 12, 2023 at 11:59

Lelik

255 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related