fadeIn and fadeOut don't work on elements with a CSS fallback

Question

I have a normal menu with a dropdown option, developed in the following way:

ul > li.dropdown > ul.dropdown-content {
  display: none;
  position: absolute;
  background-color: red;
  min-width: 100px;
}

ul > li.dropdown:hover > ul.dropdown-content {
  display: block;
}

When I try to add an animation with fadeIn and fadeOut functions to the dropdown-content, strangely jQuery doesn't add the opacity for the achievement of the animation to the dropdown-content element. If I remove display:block from CSS and make handle the hide/block of the element by jQuery, it works suddenly.

There's a way to animate an element that work both in CSS and jQuery? In order to have a fallback if jQuery doesn't load or the user have javascript disabled.

Working animation: Fiddle Not working animation (with CSS Fallback): Fiddle

Transitions of opacity are negatively effected by the `display:property` which cannot be transitioned so remove that property. — Paulie_D, Jan 23 '19 at 14:50
https://stackoverflow.com/questions/3331353/transitions-on-the-display-property — Paulie_D, Jan 23 '19 at 14:51

score -2 · Answer 1 · answered Jan 23 '19 at 14:56

-2

You can use visibility: hidden and visibility: visible; for the css fallback.

answered Jan 23 '19 at 14:56

Jacobdo

1,681
2
18
38

fadeIn and fadeOut don't work on elements with a CSS fallback

1 Answers1