在setInterval()之后淡出(然后进入)部分

Question

我有三个image容器，在旋转时显示(不同的)图像。在设定间隔后，我试图让该部分淡出，并淡入新图像。

基本上是这样的:

• 图像显示
• 开始慢慢淡出
• 图像在淡出时发生变化(因此用户看不到变化)
• 新图像开始褪色

我试图通过设置position.find(".employeeSlider__image").fadeOut().fadeIn();来实现这一点，但它的方式太快了，看起来坏了。

看这里的演示:

$(function() {
var left = $('.employeeSlider__left');
var mid = $('.employeeSlider__middle');
var right = $('.employeeSlider__right');
var images = [];
// push images to array
$('.employeeSlider__images').each(function() {
var src = $(this).attr('src');
images.push(src);
});
/***********/
/* HELPERS */
/***********/
function changeImage(position) {
var currentLeft = left.find('.employeeSlider__image').attr('src');
var currentMid = mid.find('.employeeSlider__image').attr('src');
var currentRight = right.find('.employeeSlider__image').attr('src');
var floor = images.length - 1;
var randomIndex = Math.floor(Math.random() * (floor - 0 + 1)) + 0;
var randomIndexPlus = randomIndex + 1;
var randomIndexMinus = randomIndex - 1;
//$(".employeeSlider__image").fadeOut(400, function() {
if (images[randomIndex] != currentRight && images[randomIndex] != currentMid && images[randomIndex] != currentLeft) {
position.find('.employeeSlider__image').attr('src', images[randomIndex]);
} else if (images[randomIndexPlus] != currentRight && images[randomIndexPlus] != currentMid && images[randomIndexPlus] != currentLeft) {
position.find('.employeeSlider__image').attr('src', images[randomIndexPlus]);
} else if (images[randomIndexMinus] != currentRight && images[randomIndexMinus] != currentMid && images[randomIndexMinus] != currentLeft) {
position.find('.employeeSlider__image').attr('src', images[randomIndexMinus]);
} else {
position.find('.employeeSlider__image').attr('src', images[0]);
}
//}).fadeIn(400);
/* position.find(".employeeSlider__image").fadeOut().fadeIn() */
;
}
/*****************/
/* CHANGE IMAGES */
/*****************/
// left image
setInterval(function() {
changeImage(left);
}, 3800);
// middle image
setTimeout(function() {
setInterval(function() {
changeImage(mid);
}, 4000);
}, 1000);
// right image
setTimeout(function() {
setInterval(function() {
changeImage(right);
}, 4200);
}, 2000);

});

section {
background: lightblue;
}
.employeeSlider {
width: 100%;
height: 600px;
position: relative;
margin: 0 auto;
width: 520px;
}
.employeeSlider__left,
.employeeSlider__middle,
.employeeSlider__right {
border-radius: 50%;
border: 10px solid #ffffff;
overflow: hidden;
position: absolute;
}
.employeeSlider__left img,
.employeeSlider__middle img,
.employeeSlider__right img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.employeeSlider__left {
width: 182px;
height: 182px;
bottom: 0;
left: 40px;
z-index: 2;
}
.employeeSlider__middle {
width: 407px;
height: 417px;
top: 58px;
left: 0;
z-index: 1;
}
.employeeSlider__right {
width: 222px;
height: 222px;
top: 0;
right: 0;
z-index: 3;
}
.employeeImages {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<section class="section">
<div class="employeeSlider">
<div class="employeeSlider__left">
<img class="employeeSlider__image" src="" alt="" loading="disabled">
</div>
<div class="employeeSlider__middle">
<img class="employeeSlider__image" src="" alt="" loading="disabled">
</div>
<div class="employeeSlider__right">
<img class="employeeSlider__image" src="" alt="" loading="disabled">
</div>
</div>
<div class="employeeImages">
<img class="employeeSlider__images" src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership%20Profile%20Shots/Silverfin_Leadership_Joris_VanDerGutch.jpg" alt="Silverfin_Leadership_Joris_VanDerGutch" loading="lazy">
<img class="employeeSlider__images" src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership%20Profile%20Shots/Silverfin_Leadership_Tim_Vandecasteele.jpg" alt="Silverfin_Leadership_Tim_Vandecasteele" loading="lazy">
<img class="employeeSlider__images" src="https://cdn2.hubspot.net/hub/2270223/hubfs/2022/Leadership%20Profile%20Shots/Silverfin_Leadership_Nikolas_Savander.jpg?width=480&amp;height=600&amp;name=Silverfin_Leadership_Nikolas_Savander.jpg" alt="Silverfin_Leadership_Nikolas_Savander"
loading="lazy">
<img class="employeeSlider__images" src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership%20Profile%20Shots/Silverfin_Leadership_Natalie_Lamb.jpg" alt="Silverfin_Leadership_Natalie_Lamb" loading="lazy">
<img class="employeeSlider__images" src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership%20Profile%20Shots/Silverfin_Leadership_Stuart_Handley.jpg" alt="Silverfin_Leadership_Stuart_Handley" loading="lazy">
<img class="employeeSlider__images" src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership%20Profile%20Shots/Silverfin_Leadership_Domien_Claeys.jpg" alt="Silverfin_Leadership_Domien_Claeys" loading="lazy">
<img class="employeeSlider__images" src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership%20Profile%20Shots/Silverfin_Leadership_Tom_Libbrecht.jpg" alt="Silverfin_Leadership_Tom_Libbrecht" loading="lazy">
<img class="employeeSlider__images" src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership%20Profile%20Shots/Silverfin_Leadership_Stefaan_Arryn.jpg" alt="Silverfin_Leadership_Stefaan_Arryn" loading="lazy">
<img class="employeeSlider__images" src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership%20Profile%20Shots/Silverfin_Leadership_Steve_Wozniak.jpg" alt="Silverfin_Leadership_Steve_Wozniak" loading="lazy">
<img class="employeeSlider__images" src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership%20Profile%20Shots/Silverfin_Leadership_Louis_Verbeke.jpg" alt="Silverfin_Leadership_Louis_Verbeke" loading="lazy">
</div>
</section>

Answer 1

淡出文档:https://api.jquery.com/fadeout/

fadeOut有两个参数:持续时间和回调。因此，只需将其设置为较慢，并在第二个元素上调用fadeIn;

function fadeImages($first, $second){
$first.fadeOut(1000, () => $second.fadeIn(1000));
}

工作的例子:

/////////////////scripts///////////////////////
function fadeSquares($el1, $el2){
$el1.fadeOut(2000, ()=>{
$el2.fadeIn(2000);
});
}
/////////////////execute///////////////////////
let $el1 = $('#red');
let $el2 = $('#blue');
fadeSquares($el1, $el2);

.square {
height: 100px;
width: 100px;
}
#red {
background-color: red;
}
#blue {
background-color: blue;
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='wrapper'>
<div id='red' class='square'>a red square</div>
<div id='blue' class='square'>a blue square</div>
</div>

Answer 2

如果你想要平滑的过渡，那么你应该并行运行它们，即不是链接它们。下面的示例使用两个容器来交换您在链接数组中定义的图片。

const imgLinks = [
"https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/sunset-quotes-21-1586531574.jpg",
"https://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg",
"https://dynamic-media-cdn.tripadvisor.com/media/photo-o/17/e0/ce/85/sunset-beach.jpg?w=1200&h=-1&s=1"
];
let it = 0;
function cycleImages($wrapper){

let currentImage = $('#img-wrapper').children()[0];
let nextImage = prepareNew(imgLinks[it++%imgLinks.length]);
$wrapper.append(nextImage);

$(currentImage).fadeOut(5000, () => {
$(currentImage).remove();
cycleImages($wrapper);
});
$(nextImage).fadeIn(5000);
};
function prepareNew(link){

let el = document.createElement('img');

el.style.display = "none";
el.className = "showcase";
el.src = link;

return el;
}
cycleImages($('#img-wrapper'));

.showcase {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 120px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='img-wrapper'>
<img src='https://dynamic-media-cdn.tripadvisor.com/media/photo-o/17/e0/ce/85/sunset-beach.jpg?w=1200&h=-1&s=1' class='showcase' alt='image'/>
</div>