Trying to animate dropdown's opacity with jQuery, failing

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.

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;

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

Take a look at this topic:-

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

1 Like


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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.