在 2 个标题徽标之间过渡

Question

>我在标题中有 2 个不同的徽标，我应用了这个函数让它们在某个时候相互替换。

Hovewer 我想在它们进行过渡时对它们应用一些淡入和淡出。这是否仅适用于JS或CSS？

$(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);
}