Question

I’ve been fighting with this for a while now. I’ve declared the following styles.

div.contentItem{
  -webkit-transition: opacity 1.0s ease;
  display: block; // this line will be discussed below
}

div.contentItemHidden{
  opacity: 0;
}

div.contentItemVisible{
  opacity: 1;
}

And it works as supposed to except for a small, tiny issue. The different divs with contents appear below eachother. One can’t really see the other divs because of the opacity set to 0 in style contentItemHidden, but they still occupy the space.

Now, i know what you spontaneously want to suggest. “Use display: none, dummy!” on the line you’re discussing above. But guess what! If i make that change, the opacity transition doesn’t have effect at all – nothing appears on the screen.

Now, i know what you spontaneously will say now. “Put display: block, friend!” in the contentItemVisible style. But guess what! If i make that change, the opacity transition doesn’t have effect at all – the div appears kaboom instead of fading in.

I’m pretty sure that the missing transition has to do with the fact that the element is display: none. So i tried to modify my jQuery code so that right before i swap the classes (contentItemVisible and contentItemHidden), i add block’ification to the display like this.

$("#bzzz")
  .css("display", "block")
  .removeClass("contentItemHidden")
  .addClass("contentItemVisible");

Still, that has not the desired effect. If i don’t remove it later by .css(“display”, “none”) i get the weird placement (since the elements take up space, even though they can’t be seen). If i do remove it, we get no transition for opacity.

What am i doing wrong? What can i do instead?

A working jsFiddle of what i’m trying to achieve can be seen here (accept that i want to start with invisible DIV’s, of course). By changing the style to none for div.contentItem, the transition for opacity is voided.

Answer 1

We’ve got a lot of great suggestions here but in the conclusion, i don’t believe that the tip i received elsewhere about solving the situation using CSS transition was good. I’ve used .fadeIn() and .fadeOut() in JS and that made it work. Nevertheless, some valuable info here.