Trying to animate dropdown's opacity with jQuery, failing

[h2493117]

Edit fiddle - JSFiddle - Code Playground

Nothing else to say really. Code is super-simple and self-explanatory. And I’m super dumb xD

JS code is not optimized for speed, but that comes later, for now I need to get it to work.

[SamA74]

Can’t you just use css?

div.dropdown-content {
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    opacity: 0;
    transition: all linear 0.3s;
}

.dropdown:hover .dropdown-content {
    opacity: 1;
    transition: all linear 0.3s;
}

[h2493117]

No, because element is there, but invisible. The element needs to become invisible and also non-exist.

[SamA74]

Take a look at this topic:-

CSS Hover Transition

Hi folks, I want to add a delay to a mouse hover on a sub menu but for some reason I cannot get the transition to work. When I hover over the LI the UL within it should only show after a couple of seconds. Currently, when I hover over the LI it shows the UL instantly. ul.navbar-nav li ul { opacity: .5; transition: .5s all 5s } ul.navbar-nav li:hover ul{ opacity: 1; transition: .5s all 5s } Thanks in advance for any assistance!

@RyanReese

Sounds like you are showing it via display:none/display:block, in which case this will not work

The solution offered by @PaulOB is a slightly different effect, but could be adapted.

[h2493117]

Yep.

z-index: -1 on non-hover
z-index: 1 on hover.
Hides element behind body. Animate opacity, z-index springs forward and element fades in.