循环 jquery fadeIn() fadeOut() 的问题

Question

我正在努力使这个循环工作。

我有两个徽标，都集中在我正在处理的网站的登录页面上。我试图对循环进行编码，以便当一个图像fadesOut()另一个图像时fadesIn()但它不起作用。

我尝试了setInterval()但图像开始一个接一个地出现。如果我延迟一个图像，当另一个图像完成时，它会开始动画，对象的位置会发生某些事情，并且它以非居中显示。

这是我的代码：

$(document).ready(function() {
function somethingfade() {
$(".logo1").fadeIn(1000).delay(3000).fadeOut(1000);
$(".logo2").delay(6500).fadeIn(1000).delay(3000).fadeOut(1000);
$(".logo1").delay(7000).fadeIn(1000);
}
somethingfade();
});

.container {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.logocontainer {
display: block;
height: 9rem;
margin: 1rem;
}
.logo1 {
position: absolute;
display: none;
height: 9rem;
margin: 1rem;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.logo2 {
position: absolute;
display: none;
height: 9rem;
margin: 1rem;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="logocontainer">
<img class="logo1" id="logoChange" src="https://via.placeholder.com/150/?text=logo1" alt="logo1">
<img class="logo2" id="logoChange" src="https://via.placeholder.com/150/?text=logo2" alt="logo2">
</div>

谢谢！

Answer 1

fadeIn和fadeOut是异步函数。您需要使用回调来使动画看起来同步：

$(document).ready(function() {
function somethingfade() {
$(".logo1").fadeIn(1000, function() {
$(this).delay(3000).fadeOut(1000, function() {
$(".logo2").delay(6500).fadeIn(1000, function() {
$(this).delay(3000).fadeOut(1000, function() {
$(".logo1").delay(7000).fadeIn(1000);
});
})
})
});
}
somethingfade();
});

.container {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.logocontainer {
display: block;
height: 9rem;
margin: 1rem;
}
.logo1 {
position: absolute;
display: none;
height: 9rem;
margin: 1rem;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.logo2 {
position: absolute;
display: none;
height: 9rem;
margin: 1rem;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="logocontainer">
<img class="logo1" id="logoChange" src="_css/_images/UshuaiaLocals_Single.png" alt="logo 1">
<img class="logo2" id="logoChange" src="_css/_images/UshuaiaLocals_Single_Coord.png" alt="logo 2">
</div>
</div>