通过jQuery的类更改应用动画

我试图创建一个粘性的CSS菜单变成半透明，以允许通过它看到的文本。我添加了一个:hover {opacity:1;}，当用户将鼠标悬停在菜单上时，它会变得不透明，但是，它的相当“路线”变化;让这些转换生动起来会很棒，无论是首先变得透明，然后再变回不透明。通过jQuery的类更改应用动画

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

我假设悬停过渡是一个css3动画，但我还没有能够得到它的工作到目前为止。加入课程导致的初始转换 - 我甚至不知道从哪里开始！

任何帮助，将不胜感激。

解决方案 CSS3解决方案从下面标记的答案中进行修改。我将过渡效应从.fixed header nav移至header nav。当添加或删除fixed类时，这会导致动画工作。更新的解决方案在这里：Fiddle

来源

2013-04-23 Jamie

你可以修改你的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示范

来源

2013-04-23 21:59:30 Ejaz

这似乎是现货，我不知道为什么我没有不要那样做。我唯一的疑问与我对@Mooseman的评论相反 - 是否需要将过渡效果放在'：hover'内？没有它，Chrome似乎可以正常工作。 – Jamie 2013-04-24 11:13:53

您只需要在CSS中指定一个元素/类的转换（除非您稍后重写）'transition：0.5s opacity; -webkit-transition：0.5s不透明度; -moz-transition：0.5s不透明度;'指定每当所述元素/类的不透明度改变时，它应该在0.5秒的过渡中 – Ejaz 2013-04-24 11:27:17

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/

来源

2013-04-23 21:46:53 Mooseman

有没有加入过渡到'导航的理由：hover'还有'nav'？我注意到Ejay的版本似乎也没有这些额外的3行。 – Jamie 2013-04-24 11:11:24

@ user1972982它不必在'：hover上。但是如果你喜欢，你可以指定一个不同的转换（例如，'3s ease'而不是'1s'）。 – Mooseman 2013-04-24 13:07:45

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

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

Jsfiddle example

来源

2013-04-23 21:51:26 DarkAjax

OP正在寻找一个CSS3转换。 – Mooseman 2013-04-23 21:57:13

OP也将问题标记为'jQuery'，它是“假设”它必须完成CSS3，它并没有说这是一个需求... – DarkAjax 2013-04-23 22:26:26

通过jQuery的类更改应用动画

回答

相关问题