Question

我正在尝试创建一个粘性的css菜单，它变得半透明，以便通过它看到文本。当用户将鼠标悬停在菜单上时，我添加了一个:hover {opacity:1;}使其变得不透明，然而，这是一个非常“过程”的变化;在第一次透明然后再回到不透明时，动画这些过渡会很棒。

我的工作方式是使用jquery在窗口位置超出标题div高度时向body标签添加fixed类。您可以在行动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;
}

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

Answer 2

您可以结合使用jQuery的.hover()和.animate()方法来执行此操作：

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

Jsfiddle example

Answer 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用于演示

通过jquery类更改应用动画

3 个答案: