Question

我在标头中有2个不同的徽标，我应用了此功能，以便它们可以在特定位置相互替换。

但是我想在它们过渡时对其应用淡入和淡出。

$(function () { 
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) { 
            $('.logo-image.logo-light img').addClass('active')
        }
        if ($(this).scrollTop() < 500) { 
            $('.logo-image.logo-light img').removeClass('active')
        }
    })
});

.logo-image.logo-light{
    background:center center no-repeat;
    background-size:contain;
    background-image: url('http://www.plaforma.me/wp-content/uploads/2018/04/logo-zastavica.png');
}

.logo-image.logo-light img{
    opacity:0;
    -webkit-transition:opacity 1s ease-in-out;
    transition:opacity 1s ease-in-out;
}

.logo-image.logo-light img.active{
    opacity:1;
}

这是结果-我希望第二个徽标成为第一个徽标，默认情况下是第一个，但现在在过渡时显示为第二个。徽标也没有完全消失，第一次进行过渡时，请确保我的错误出现在某个地方。

看-http://www.plaforma.me/studio/

解决方案-按顺序反转不透明性，并将背景色添加为黑色，因此不透明。

Answer 1

重新考虑HTML标记并使用CSS来做可能会更容易。您需要做的就是切换课程。

var logo = document.querySelector('div.bar')
window.setInterval(()=>{
  logo.classList.toggle('other')
}, 5000)

div.bar > span.logo
{ 
  display: inline-block;
  width:100px;
  height:100px;
}


div.bar > span.logo1 { 
  background-image: url(http://placekitten.com/100/100);
}


div.bar > span.logo2 {
  position: realtive;
  margin-left: -105px;
  background-image: url(http://placekitten.com/g/100/100);
  opacity: 0;
  transition: opacity 3s ease-out;
}

div.bar.other span.logo2 {
  opacity: 1;
  transition: opacity 3s ease-out;
}

<div class="bar">
  <span class="logo logo1"></span>
  <span class="logo logo2"></span>
  <span>Hello there!</span>
</div>

Answer 2

您尝试使用jquery的.fadeIn吗？

我已经编写了一些代码。不知道这是否有效，但我值得一试

希望这行得通，

拉蒙

$(window).scroll(function () {
        if ($(this).scrollTop() > 500) { 
            $('.logo-image.logo-light img').fadeIn(0);
        }

在2个标题徽标之间进行转换

2 个答案: