jquery - 通过 jquery 类更改应用动画

Question

我正在尝试创建一个粘性 css 菜单，它会变成半透明的，以便通过它可以看到文本。我添加了一个 :hover {opacity:1;} 以使其在用户将鼠标悬停在菜单上时不透明，但是，这是一个相当大的“类(class)”更改；为这些过渡设置动画会很棒，无论是在第一次变为透明时，还是在返回不透明时。

我实现它的方法是，当窗口位置超出标题 div 的高度时，使用 jquery 将 fixed 类添加到 body 标记。您可以在实际中看到它 here .

我假设悬停过渡是一个 css3 动画，但到目前为止我还无法让它工作。添加类引起的初始转换 - 我什至不知道从哪里开始!

如有任何帮助，我们将不胜感激。

解决方案从下面标记的答案中提取和修改的 CSS3 解决方案。我将过渡效果从 .fixed header nav 移到了 header nav。当添加或删除 fixed 类时，这会导致动画工作。此处更新解决方案:Fiddle

Answer 1

CSS:

body.fixed nav{
    position:fixed;
    top:0px;
    opacity:0.6;
    transition: 1s opacity;
    -webkit-transition: 1s opacity;
    -moz-transition: 1s opacity;
    width:100%;
}
body.fixed nav:hover{
    opacity:1;
    transition: 1s opacity;
    -webkit-transition: 1s opacity;
    -moz-transition: 1s opacity;
}

fiddle :http://jsfiddle.net/sTCqq/1/