Question

const firstTitle = document.querySelector(".first-title");
const secondTitle = document.querySelector(".second-title");

const firstSubtitle = document.querySelector(".first-subtitle");
const secondSubtitle = document.querySelector(".second-subtitle");


window.onload = function() {
  setInterval(function() {

    firstTitle.classList.add('fadeOut');
    secondTitle.classList.add('fadeIn');
    firstSubtitle.classList.add('fadeOut');
    secondSubtitle.classList.add('fadeIn');

  }, 4000);
}

h1 {
  margin-bottom: 24px;
  position: relative;
}

h1 span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

p {
  font-size: 20px;
  line-height: 27px;
  margin-bottom: 80px;
  position: relative;
}

p span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.fadeIn {
  animation: fadeIn 1s linear infinite;
}

.fadeOut {
  animation: fadeOut 1s linear infinite;
}


/* Fade In and Fade Out Animation */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5
  }
  100% {
    opacity: 0;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Fading</title>
</head>

<body>
  <div class="container">
    <header class="header">
      <section>
        <h1>
          <span class="first-title">Title A</span>
          <span class="second-title">Title B</span>
        </h1>
        <p>
          <span class="first-subtitle">Text A</span>
          <span class="second-subtitle">Text B</span>
        </p>
      </section>
    </header>
  </div>
</body>

</html>

从我的代码中，我已经对样式进行了设置，以使h1和p标签内的span内的文本处于同一级别。这是因为我希望一个跨度恰好在另一个跨度逐渐消失的同时逐渐消失，从而创建一个临时的重叠效果。但是，以我目前对CSS和JavaScript的了解，我无法做到这一点。

如何在无限循环中同时不断淡入和淡出h1和p标签中的两个不同范围，以使它们在完全淡入或淡出之前在某个点重叠。

Answer 1

解决方案：

let title1 = document.getElementById('first-title');
let subTitle1 = document.getElementById('first-subtitle');
let title2 = document.getElementById('second-title');
let subTitle2 = document.getElementById('second-subtitle');

// Third, create variable so is can check if this element is first element or second element
let checkTimes = true;

function hapyFade() {
setTimeout(function(){ 

// Sixthly,Evry time checkTimes is reverse to aprouch toggle element
  if (checkTimes == true) {
  
  // Seventh, In the first case of variapple, hide the first element and show the second
    title1.style.opacity = subTitle1.style.opacity = 0;
    title2.style.opacity = subTitle2.style.opacity = 1;
// Sixthly too, here reverse variable   
checkTimes = false;
  } else {
  
  // Seventh too, In the second case of variapple, hide the second element and show the first
    title1.style.opacity = subTitle1.style.opacity = 1;
    title2.style.opacity = subTitle2.style.opacity = 0;
    
    // Sixthly too, here reverse variable
    checkTimes = true;
  }
  
  // Fifth, same a function inside setTimeOut so reabeate this each 2 second
  hapyFade();
}, 2000);
}

// Fourth, I created a fuction for hide show elemnt as toggle - after 2 second
hapyFade();

h1 {
  margin-bottom: 24px;
  position: relative;
}

h1 span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  /* Secondly, Hide the second element so that only the first element is on the square at the start of the page */
  opacity: 0;
}

p {
  font-size: 20px;
  line-height: 27px;
  margin-bottom: 80px;
  position: relative;
}

p span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
h1 span,
p span {
  transition: all .5s ease-in-out;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Fading</title>
</head>

<body>
  <div class="container">
    <header class="header">
      <section>
        <h1>
        <!-- First, here I used id so I can call it in javascript -->
          <span id="first-title">Title A</span>
          <span id="second-title">Title B</span>
        </h1>
        <p>
          <span id="first-subtitle">Text A</span>
          <span id="second-subtitle">Text B</span>
        </p>
      </section>
    </header>
  </div>
</body>

</html>

循环同时淡入和淡出容器中的不同文本

1 个答案: