通过 jquery 类更改应用动画答案

【问题标题】：Applying animation through jquery class change通过 jquery 类更改应用动画
【发布时间】：2013-04-17 06:37:33
【问题描述】：

我正在尝试创建一个粘性 css 菜单，该菜单变为半透明以允许通过它看到文本。我添加了:hover {opacity:1;} 以在用户将鼠标悬停在菜单上时使其不透明，但是，这是一个相当“课程”的变化；为这些过渡设置动画会很棒，无论是在第一次变为透明时，然后在返回不透明时。

当窗口位置超出我的标题 div 的高度时，我使它工作的方式是使用 jquery 将 fixed 类添加到 body 标记。你可以在here看到它。

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

任何帮助将不胜感激。

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

【问题讨论】：

标签： jquery css css-transitions

【解决方案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;
}

小提琴：http://jsfiddle.net/sTCqq/1/

【讨论】：

是否有理由将过渡添加到nav:hover 以及nav？我注意到 Ejay 的版本似乎也可以在没有这 3 行的情况下工作。
@user1972982 如果你愿意，它不必在:hover. But you can specify a different transition (e.g., 3s ease` 上而不是1s)。

【解决方案2】：

您可以结合 jQuery 的 .hover() 和 .animate() 方法来做到这一点：

$('header').hover(function(){
   $(this).animate({
    opacity: 1 }, 1000);
}, function(){
    $(this).animate({
    opacity: 0.6 }, 1000);
});

Jsfiddle example

【讨论】：

OP 正在寻找 CSS3 过渡。
OP 也将问题标记为jQuery，并且它“假设”它必须使用 CSS3，它并没有说这是一个要求......

【解决方案3】：

您可以将 CSS 的特定部分修改为

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

see this fiddle 用于演示

【讨论】：

这似乎是正确的，我不确定我为什么不尝试。我唯一的疑问与我对@Mooseman 的评论相反——它是否要求过渡效果在:hover 内？没有它，它似乎在 Chrome 中也能正常工作。
您只需要在 CSS 中为元素/类指定一次过渡（除非您稍后覆盖它）transition: 0.5s opacity; -webkit-transition: 0.5s opacity; -moz-transition: 0.5s opacity; 指定每当所述元素/类的不透明度发生变化时，它应该在0.5 秒的过渡