使徽标从 0.8 不透明度开始

Posted 2023-05-08

【中文标题】使徽标从 0.8 不透明度开始

【英文标题】：Make logo start at 0.8 opacity

【发布时间】：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 设置您想要的动画类型

【参考方案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.fadedopacity:0.8
imgtransition: 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);