javascript - 使用淡入淡出效果滚动时更改 Logo

Question

向下滚动时我想更改 Logo img。我在写小代码JSFiddle

我认为我的代码工作正常，我试过了，但无法理解如何添加 fadein 和 fadeout 效果。

附言也许你可以向我展示另一个相同的功能，因为在同一个网站上我看到它只适用于 css。

<header style="position: fixed; margin: 0px auto; width: 100%; z-index: 999;">
    <div class="logo fleft"> <a href="/" id="logo-img">
            <img src="https://www.google.ru/images/srpr/logo11w.png" title="GeoConsul.Gov.Ge - Ministry of Foreign Affairs of Georgia" />
          </a>
    </div>
</header>

.logo img {
    position: absolute;
    z-index: 3;
}

$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 114) {
            // $('#logo-img img').fadeOut('slow');
            $('#logo-img img')
                .css({
                'width': '275px',
                'height': '95px',
                'padding-top': '4px'
            })
                .attr('src', 'https://www.google.ru/images/srpr/logo1w.png');
        }
        if ($(this).scrollTop() < 114) {
            // $('#logo-img img').fadeIn('fast');
            $('#logo-img img')
                .css({
                'width': '538px',
                'height': '190px',
                'padding-top': '0px'
            })
                .attr('src', 'https://www.google.ru/images/srpr/logo11w.png');
        }
    });
});

Answer 1

尝试:

.logo img{
    position: absolute;
    z-index: 3;
    -webkit-transition: 0.4s ease-in
}