文章/答案/技术大牛

发布

社区首页 >问答首页 >在setInterval()之后淡出(然后在)部分

问在setInterval()之后淡出(然后在)部分
EN

Stack Overflow用户

提问于 2022-05-09 18:40:24

回答 2查看 54关注 0票数 1

我有三个image容器，它们在旋转时显示(不同)图像。在一个设定的间隔之后，我试图让这个部分很好地淡出，并淡出新的图像。

本质上是这样的：

图像显示，当
淡出时，
开始缓慢淡出
图像更改(因此用户看不到该更改)
新图像开始在

F 210中淡出。

我试图通过设置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>

css

javascript

html

jquery

回答 2

Stack Overflow用户

发布于 2022-05-09 18:46:57

FadeOut文档：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>

票数 0

Stack Overflow用户

发布于 2022-05-10 11:22:52

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

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72176792

复制

相似问题

问在setInterval()之后淡出(然后在)部分
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在setInterval()之后淡出(然后在)部分EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在setInterval()之后淡出(然后在)部分
EN