Creating "showing" and "hiding" effect when a div have display-none or not

Question

HTML: <div class="display-none">

CSS: .display-none { display: none; }

JS: removeClass('display-none') and addClass('display-none')

Is it possible to create a "fade-in" and "fade-out" effect when div.display-none loses/get the display-none class?

I can make this only work when working with CSS effects, like hover:

.random-btn {
    background-color: red;
    transition-timing-function: ease;
    transition-delay: 1s; 
    transition-duration: 0.5s;
}

.random-btn:hover {
    background-color: blue;
}

Answer 1

Transitions do not work on the display attribute. display none/block is a binary state - it is either there or not. But you can make the div always display: block and then animate opacity: 0.

Look at this answer for full examples

Answer 2

You sure can by using .fadeToggle() in jQuery instead of just toggleClass.

Demo: https://codepen.io/anon/pen/daWMjp

You can also read up more on the jQuery Documentation on effects here: http://api.jquery.com/category/effects/

HTML

<div class="this-div">
  <p>Text in the Div</p>
</div>

<div>
  <button class="toggle-btn">Toggle Hide/Show</button>
</div>

CSS

.display-none{
  display:none;
}

jQuery

$('.toggle-btn').click(function(){
  $('.this-div').fadeToggle('display-none'); 
});