如何从.InnerHTML获取文本，以便在更改时淡入和淡出

问题描述

我有一个脚本，该脚本只是在HTML页面上更改文本。它的“个人鉴定”文本设置为每8秒更改一次。脚本本身可以正常工作，但是当再次更改时，我无法使文本淡入。从我的代码中可以看到，我能够使其淡入，但它只是在第一次被硬编码到代码中才这样做。

我见过有人张贴关于当您将鼠标悬停或单击某些内容时如何进行更改的帖子，而不是有关从脚本更改文本时的更改。

提前感谢帮助新手！ ：-）

    const testimonials = [
      {
        name: "Robert - Louisville,KY",quote:
          '"I\'m not one to do readings but I actualy enjoyed the experience. Learning about the past,present,and future of my career was not only entertaining but insightful."',},{
        name: "Tyler - Louisville,quote:
          '"It helped me gain some closure and realize that I can\'t just sit here and let life work itself out. I have to take my own initiative."',{
        name: "Jason & Joey - Tampa,FL",quote:
          '"Kevin’s reading was spot-on! We went into it just for fun,without any expectations,and found ourselves nodding in agreement with everything he said. He was thorough in his explanations and made sure we understood exactly what the cards meant. We highly recommend a reading by Kevin."',];
    
    let counter = 0;
    const testimonialQuote = document.getElementById("newQuote");
    const testimonialName = document.getElementById("newName");
    const changeTime = setInterval(newTestimonial,8000);
    
    function newTestimonial() {
      console.log("Starting function");
      testimonialQuote.innerHTML = Object.values(testimonials[counter])[1];
      testimonialName.innerHTML = Object.values(testimonials[counter])[0];
      counter++;
      if (counter >= testimonials.length) {
        counter = 0;
      }
    }

    .quote-name-container {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      animation: fadeIn 1s ease-in;
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    .testimonial-container #newQuote {
      font-size: 1.6rem;
      line-height: 2.2rem;
      margin-top: 1rem;
      text-align: center;
    }
    
    .testimonial-container #newName {
      font-size: 1.6rem;
      line-height: 2.2rem;
      margin-top: 1rem;
      text-align: center;
    }

    <div class="testimonial-container">
            <h2 class="testimonial-header">Testimonials</h2>
            <div class="quote-name-container">
              <div id="newQuote">
                <!-- This is where the quote for the testimonial will go -->
                <p>"I'm not one to do readings but I actualy enjoyed the experience. Learning about the past,and future of my career was not only entertaining but insightful."'</p>
                <p>Robert - Louisville,KY</p>
              </div>
              <div id="newName">
                <!-- This is where the name for the quote will go -->
              </div>
              <script src="changetestimonial.js"></script>
            </div>
          </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）