jquery - fadeIn 和 fadeOut 不适用于具有 CSS 回退的元素

Question

我有一个带有下拉选项的普通菜单，按以下方式开发:

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;
}

当我尝试向下拉内容添加带有 fadeIn 和 fadeOut 函数的动画时，奇怪的是 jQuery 没有为实现动画添加不透明度下拉内容元素。如果我从 CSS 中删除 display:block 并通过 jQuery 处理元素的隐藏/ block ，它会突然工作。

有一种方法可以使一个元素在 CSS 和 jQuery 中都起作用？为了在 jQuery 未加载或用户禁用了 javascript 时进行回退。

工作动画:Fiddle 动画不工作(使用 CSS 回退):Fiddle

Answer 1

您可以使用 visibility: hidden 和 visibility: visible;用于 css 回退。