Question

向下滚动时，我想更改徽标img。我写了小代码JSFiddle

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

P.S。也许你可以告诉我相同的另一个功能，因为在同一个网站上我看到这个只能用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
}

Answer 2

添加像这样的样式标签

<style>.transition{ opacity: 0.5; transition: opacity 2.0s}</style>

然后使用类“transition”执行jQuery addClass / removeClass，它将淡出淡出。

您可以更改不透明度以确定其消失程度。

Answer 3

尝试使用javascript（或jQuery）DOM属性更改来更改URL，这样当窗口距离顶部有一定偏移时，图像的URL会发生变化。

滚动时使用淡入淡出效果更改徽标

3 个答案: