javascript - 希望在使用 jQuery 或 JavaScript 完成后重置事件

Question

我目前有一个幻灯片放映，其中文本淡入特定幻灯片。例如 text1 出现在 slide1 上，text2 出现在 slide2 等上。幻灯片放映是自动的，但也可以是被用户点击。

我想要做的是重置褪色文本，以便每次用户单击新幻灯片或幻灯片自动更改前一张幻灯片文本淡入淡出事件重置，为幻灯片放映做好准备。

因此，幻灯片进入，文本淡入，幻灯片自动播放或用户点击下一张幻灯片，重置之前的幻灯片事件。

我查看了每个事件完成后的重置函数，但似乎没有任何效果。

var slideIndex = 1;
var t;
showSlides(slideIndex);

function plusSlides(n) {
  slideIndex = slideIndex + n;
  clearTimeout(t);
  showSlides(slideIndex);
  console.log(slideIndex);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");

  if (n == undefined) {
    n = ++slideIndex
  }

  if (n > slides.length) {
    slideIndex = 1
  }

  if (n < 1) {
    slideIndex = slides.length
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";
  $(slides[slideIndex - 1]).find('#fadeTxt1S1').fadeIn(3000);
  $(slides[slideIndex - 1]).find('#fadeTxt2S1').delay(1500).fadeIn(2500);
  $(slides[slideIndex - 1]).find('#fadeTxt1S2').fadeIn(3000);
  $(slides[slideIndex - 1]).find('#fadeTxt2S2').delay(1500).fadeIn(2500);
  $(slides[slideIndex - 1]).find('#fadeTxt1S3').fadeIn(3000);
  $(slides[slideIndex - 1]).find('#fadeTxt2S3').delay(1500).fadeIn(2500);
  t = setTimeout(showSlides, 7500)
};

#fadeTxt1S1 {
  display: none;
  color: white;
  position: absolute;
  top: 300px;
  left: 250px;
  font-size: 65px;
  font-family: serif;
  font-style: italic;
  opacity: 0.9;
  text-shadow: 2px 2px #9B51E0;
}

#fadeTxt1S2 {
  display: none;
  color: white;
  position: absolute;
  top: 200px;
  left: 300px;
  font-size: 65px;
  font-family: serif;
  font-style: italic;
  opacity: 0.9;
  text-shadow: 2px 2px #9B51E0;
}

#fadeTxt1S3 {
  display: none;
  color: white;
  position: absolute;
  top: 310px;
  right: 110px;
  font-size: 60px;
  font-family: serif;
  font-style: italic;
  opacity: 0.9;
  text-shadow: 2px 2px #9B51E0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="slideShowContainer">
  <div class="mySlides fade">
    <img class="homePageSlides imageCover" src="HomePage/slide3b.jpg">
    <p id="fadeTxt1S1">text 1 for slide 1</p>
  </div>
  <div class="mySlides fade">
    <img class="homePageSlides imageCover" src="HomePage/test2.jpg">
    <p id="fadeTxt1S2">text 1 for slide 2</p>
  </div>
  <div class="mySlides fade">
    <img class="homePageSlides imageCover" src="HomePage/test3.jpg">
    <p id="fadeTxt1S3">text 1 for slide 3</p>
  </div>
  <a class="prev" onclick="plusSlides(-1)">&lsaquo;</a>
  <a class="next" onclick="plusSlides(1)">&rsaquo;</a>

Answer 1

“重置事件”的含义并不完全清楚，但我假设您想结束任何正在进行的动画。

为此，您可以在 showSlides 函数中添加这一行，在启动新动画的行之前:

$('[id^="fadeTxt"]').finish();

这将匹配所有在其 id 属性值开头具有“fadeTxt”的元素，并停止应用到它的任何动画，使它们进入计划的最终动画状态。