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处理元素的隐藏/阻止，它将突然起作用。

有一种方法可以使在CSS和jQuery中都可以使用的元素动画化？为了在不加载jQuery或禁用了javascript的情况下进行备用操作。

有效动画：Fiddle 无法正常播放动画（带有CSS后备广告）：Fiddle

Answer 1

您可以使用可见性：隐藏和可见性：可见；对于CSS后备广告。