Question

我写了一些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);
    });
});

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

Answer 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')
    }
});

徽标以完全不透明度开始，你创建了第一个fadeIn，添加了类.faded，我放了0.5个不可操作来使效果更加明显），然后设置mouseenter和{{1} } events（根据需要添加/删除类）。之后，您可以使用CSS获得过渡效果。

此处您无需为徽标设置动画。只需在嵌套动画中添加或删除类mouseleave。

如果您想在转换后管理其他div的动画，可以使用faded方法：

delay()

使徽标以0.8不透明度开始

2 个答案:

的jQuery

CSS