使徽标从 0.8 不透明度开始答案

【问题标题】：Make logo start at 0.8 opacity使徽标从 0.8 不透明度开始
【发布时间】：2014-08-29 11:42:32
【问题描述】：

我编写了一些 jQuery 代码来帮助我制作网站徽标的动画。

它应该在一秒钟内从顶部淡入到 80% 的不透明度，之后它有可能在鼠标悬停时从 80% 到 100% 的不透明度来回淡入。

目前，我的网页按预期从顶部淡入徽标超过一秒钟，但是当我将鼠标悬停然后将其移开时，它会淡入完全不透明度并且仅达到 80%。鼠标悬停之后就可以正常工作了。

这是我的代码：

$(document).ready(function () {
    var fadeInTime = 1000;

    $('.navigation .logo').animate({
        opacity: 0
    }, 0);
    $('.right ul').animate({
        opacity: 0
    }, 0);

    $('.navigation .logo').animate({
        marginTop: '48px',
        opacity: '0.8'
    }, fadeInTime).queue(function () {
        $('.right ul').animate({
            marginTop: '48px',
            opacity: '0.8'
        }, fadeInTime)
    });

    $('li > a').mouseenter(function () {
        $(this).fadeTo('fast', 1);
    });
    $('li > a').mouseleave(function () {
        $(this).fadeTo('fast', 0.8);
    });

    $('.logo img').mouseenter(function () {
        $(this).fadeTo('fast', 1);
    });
    $('.logo img').mouseleave(function () {
        $(this).fadeTo('fast', 0.8);
    });
});

【问题讨论】：

设置为opacity to 0.8 in the CSS
@Liam 与在页面加载时将其从 0 淡入到 .8 有何相同之处？
没有。它将在 0.8 时加载。
离题：您可以通过链接 mouseenter/leave 函数来简化代码，或者使用hover()。
你应该使用 CSS 来处理加载动画之后的悬停动画。只需设置.logo img:hover {opacity: 1.0;} 并为.logo img 设置您想要的动画类型

标签： jquery jquery-animate opacity

【解决方案1】：

我认为这可能是您最好的解决方案... CSS 和 JQuery 动画的混合。这样你就可以分担责任，而不是过多地依赖脚本，而是 CSS。对于动画，我认为如果你可以使用 CSS 来实现它总是更好。

jQuery

$(document).ready(function () {
    var fadeInTime = 1000;

    $('.navigation .logo').animate({
        marginTop: '48px',
        opacity: '0.8'
    }, fadeInTime).queue(function () {
        $('.right ul').animate({
            marginTop: '48px',
            opacity: '0.8'
        }, fadeInTime)
    });
});

CSS

.navigation .logo, .right ul {
    opacity: 0;
}

li > a, .logo img {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

li > a:hover, .logo img:hover {
    opacity: 1.0;
}

【讨论】：

【解决方案2】：

那怎么样？

jsFiddle

你只需要满足你的需要（如果你提供了一个 jsFiddle 或者我自己填充/更新的东西）：

HTML：

<img src="http://lorempixel.com/400/200/"/>

CSS：

img.faded{opacity:0.8}
img{transition: opacity 1s;}

JS（jQuery）：

$('img').addClass('faded')
    .on({
    mouseenter: function () {
        $('img').removeClass('faded')
    },
    mouseleave: function () {
        $('img').addClass('faded')
    }
});

徽标以完全不透明度开始，您创建第一个淡入淡出，添加类 .faded，我设置了 0.5 不透明度以使效果更明显），然后设置 mouseenter 和 mouseleave 事件（正在添加/根据需要删除类。之后，你就得到了 CSS 的过渡效果。

在这里您不需要为徽标设置动画。只需在嵌套动画中需要时添加或删除类faded。

如果你想在过渡后管理另一个div的动画，你可以使用delay()方法：

$('.navigation .logo').addClass('faded');
$('.right ul').delay(1000) // must match the css duration
.animate({
    marginTop: '48px',
    opacity: '0.8'
}, fadeInTime);

【讨论】：