jquery - 处理我希望用户不可见的 DOM 元素

Question

我有一个页脚，我希望用户在他们滚动到我的页面底部之前不可见。我正在尝试使用 CSS 来完成这一切，并且只使用 JS 来应用将执行 CSS 转换的类，但问题是页脚中有一些锚点<a></a>，所以我最初使用不透明度的方法允许用户仍然悬停在链接并在我希望他们之前单击。

这导致我添加了 jQuery$('.footer').hide()并$('.footer').show()就位，以便 DOM 仅在我想要的时候出现。但是，这样做似乎破坏了应该发生的 CSS 过渡（现在不是从 0 不透明度到 0.8 的动画，而是立即进行）。

是否有任何人知道的解决方案可以让我完全隐藏 DOM，但让我在它可用时立即在其上使用 CSS 转换$.show()？

只需向下导航到“为什么”部分并观察.. 第一个 CSS 转换被破坏，但显示按钮的第二个工作正常。

score 2 · Accepted Answer

不幸的是，您无法转换已隐藏的元素display: none（这是 jQueryhide()所做的。

解决此问题的最佳方法是隐藏项目visibility: hidden并将 a 声明height为零。这样，您仍然可以opacity通过操作类来应用过渡以获得所需的效果。

CSS

.hide {
  visibility: hidden;
  height:0;
  opacity:0;
  transition: opacity .2s ease;
}

.show {
  visibility:visible;
  height:auto;
  opacity:1;
}

score 0 · Accepted Answer

jQuery 提供了诸如fadeIn和之类的方法fadeOut。还有animate方法。

2 回答 2