通过jquery类更改应用动画

我正在尝试创建一个粘性css菜单，它将变成半透明的，以允许通过它查看文本。我添加了一个

：hover{opacity:1；}

，当用户将鼠标悬停在菜单上时使其不透明，然而，这是一个相当“过程”的变化；这将是伟大的动画这些过渡，无论是在第一次变成透明，然后再回到不透明

我的工作方式是，当窗口位置超出页眉div的高度时，使用jquery向body标记添加一个

fixed

类。您可以看到它的作用

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

任何帮助都将不胜感激

解决方案 CSS3解决方案，根据下面标记的答案进行修改。我将转换效果从

.fixed header nav

移动到

header nav

。这将导致在添加或删除

fixed

类时动画工作。此处更新的解决方案：

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;
}

小提琴：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:

您可以将jQuery的

.hover（）

和

.animate（）

方法结合起来执行此操作：

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

---

您可以将jQuery的

.hover（）

和

.animate（）

方法结合起来执行此操作：

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

---

您可以将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;}
    }
}

---

对于演示

您可以将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;}
    }
}

---

对于演示

OP正在寻找CSS3转换。OP也将问题标记为

jQuery

，并且它“假设”必须在CSS3中完成，它没有说这是一项要求……OP正在寻找CSS3转换。OP也将问题标记为

jQuery

，并且它“假设”必须在CSS3中完成，它没有说这是一项要求……是否有理由将转换添加到

nav:hover

以及

nav

？我注意到Ejay的版本似乎也可以在没有这三行代码的情况下运行。@user1972982它不必在

：hover上。但是，如果愿意，您可以指定不同的转换（例如，

3s ease`而不是

1s

）。是否有理由将转换添加到

nav:hover

以及

nav

？我注意到Ejay的版本似乎也可以在没有这三行代码的情况下运行。@user1972982它不必在

：hover上。但如果愿意，您可以指定不同的转换（例如，

3s ease`而不是

1s

），这似乎很合适，我不确定为什么我没有尝试。我唯一的查询与我对@Mooseman的评论相反-它是否要求转换效果在

：hover

中？如果没有它，在Chrome中似乎可以正常工作。您只需要在CSS中为元素/类指定一次转换（除非以后重写它）

transition:0.5s不透明度-webkit转换：0.5s不透明度-moz转换：0.5s不透明度

指定每当所述元素/类的不透明度发生变化时，它应该在0.5秒的时间内转换。这似乎是正确的，我不确定为什么我没有尝试。我唯一的查询与我对@Mooseman的评论相反-它是否要求转换效果在

：hover

中？如果没有它，在Chrome中似乎可以正常工作。您只需要在CSS中为元素/类指定一次转换（除非以后重写它）

transition:0.5s不透明度-webkit转换：0.5s不透明度-moz转换：0.5s不透明度

指定每当所述元素/类的不透明度发生变化时，其应处于0.5秒的过渡状态