Fade out (and then in) section after setInterval()-CodePudding

I have three image containers which show (different) images on rotation. After a set interval, I'm trying to get that section to fade out nicely, and fade the new image in.

Essentially something like:

Image shows
Starts to fade out slowly
Image changes when it's faded out (so the change isn't visual to the user)
New image starts to fade in

I've tried to achieve this by setting position.find(".employeeSlider__image").fadeOut().fadeIn();, but it's way too fast and looks broken.

See demo here:

$(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 >

  <div >
    <div >
      <img  src="" alt="" loading="disabled">
    </div>
    <div >
      <img  src="" alt="" loading="disabled">
    </div>
    <div >
      <img  src="" alt="" loading="disabled">
    </div>
  </div>

  <div >
    <img  src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership Profile Shots/Silverfin_Leadership_Joris_VanDerGutch.jpg" alt="Silverfin_Leadership_Joris_VanDerGutch" loading="lazy">
    <img  src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership Profile Shots/Silverfin_Leadership_Tim_Vandecasteele.jpg" alt="Silverfin_Leadership_Tim_Vandecasteele" loading="lazy">
    <img  src="https://cdn2.hubspot.net/hub/2270223/hubfs/2022/Leadership Profile Shots/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  src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership Profile Shots/Silverfin_Leadership_Natalie_Lamb.jpg" alt="Silverfin_Leadership_Natalie_Lamb" loading="lazy">
    <img  src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership Profile Shots/Silverfin_Leadership_Stuart_Handley.jpg" alt="Silverfin_Leadership_Stuart_Handley" loading="lazy">
    <img  src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership Profile Shots/Silverfin_Leadership_Domien_Claeys.jpg" alt="Silverfin_Leadership_Domien_Claeys" loading="lazy">
    <img  src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership Profile Shots/Silverfin_Leadership_Tom_Libbrecht.jpg" alt="Silverfin_Leadership_Tom_Libbrecht" loading="lazy">
    <img  src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership Profile Shots/Silverfin_Leadership_Stefaan_Arryn.jpg" alt="Silverfin_Leadership_Stefaan_Arryn" loading="lazy">
    <img  src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership Profile Shots/Silverfin_Leadership_Steve_Wozniak.jpg" alt="Silverfin_Leadership_Steve_Wozniak" loading="lazy">
    <img  src="https://cdn2.hubspot.net/hubfs/2270223/2022/Leadership Profile Shots/Silverfin_Leadership_Louis_Verbeke.jpg" alt="Silverfin_Leadership_Louis_Verbeke" loading="lazy">
  </div>

</section>

CodePudding user response：

FadeOut documentation: https://api.jquery.com/fadeout/

fadeOut takes 2 parameters - duration and a callback. So just set it to slower and call fadeIn on the second element;

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

Working example:

/////////////////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>

CodePudding user response：

If you want smooth transitions, then you should run them parallel, i.e. not chain them. The following example uses two containers to interchange pictures that you define in an array of links.

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>