Question

我的代码存在一个小问题。我有一个元素，当页面滚动时它会出现。但是，我不能让它以更平滑的方式“出现”。我已经尝试过CSS过渡和尝试淡入淡出，但都没有工作。它总是“跳”，我无法让它缓和。

以下是代码：

$(window).on("scroll", function () {
    $('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});

所以看起来很好，但我无法弄清楚如何动画添加类名。

这是CSS btw：

.navbar {
    visibility: hidden;
}

.navbar.visible {
    visibility: visible;
}

Answer 1

使用fadeToggle而不是使用toggleClass。就CSS而言，它会为你做任何事情。

尝试一下，只需要fadeToggle（）;

Answer 2

无法使用CSS过渡动画

visibility。

但你可以这样做：

.navbar {
  opacity: 0;
  transition: opacity .5s ease; // Feel free to use prefixes.
}

.navbar.visible {
  opacity: 1;
}

CSS转换/动画肯定是2014年动画内容的最佳方式。你应该避免使用fadeToggle（）和其他jQuery动画方法。

Answer 3

以下是具有正确css转换的代码示例。您无法为可见性设置动画，但您可以使用位置和不透明度。

http://jsfiddle.net/xZ6fm/

.navbar {
    position: fixed;
    top: -100px;
    left: 0; right: 0;
    padding: 12px;
    opacity: 0;
    background: #ccc;
}

.navbar.visible {
    top: 0;
    opacity: 1;
    -webkit-transition: top 0.3s linear, opacity 0.7s linear;
    -moz-transition: top 0.3s linear, opacity 0.7s linear;
    transition: top 0.3s linear, opacity 0.7s linear;
}

Answer 4

如其他答案所示，fadeToggle（）将为您完成工作。坦率地说，这可能是实现这种效果的最简单方法。

CSS转换需要transition属性。将此代码块放在每个CSS声明中：

transition: visibility .25s linear;
-webkit-transition: visibility .25s linear;
-moz-transition: visibility .25s linear;
-o-transition: visibility .25s linear;

如果您对可见性有困难，请尝试使用不透明度。

jQuery toggleClass - 无法动画或给它转换

4 个答案: