jquery - 如何使用jQuery动画显示循环中的下一个div元素

Question

我想编写一个 jQuery 动画，在循环中显示下一个 div。悬停时，动画应该停止。

目前，我让它在点击上工作，但我不知道如何为它制作动画。

这是代码：

var Text = $(".text");
Text.on("click", function() {
  var TextVisibility = $(this).css("display", "none");
  var NextText = TextVisibility.next(".text");
  if (!NextText.length) NextText = Text.eq(0);
  $(NextText).css("display", "block");
});

.text {
  display: none;
  white-space: pre-wrap;
}

.text:nth-child(1) {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section>
  <div class="text">Text Text Text</div>
  <div class="text">Link Link Link</div>
  <div class="text">Another Text</div>
</section>

我需要进行哪些更改才能自动更改而不必单击文本？

标签： jquery

Answer 1

您可以通过创建一个函数来处理显示，并使用它setInterval来告诉代码调用它的频率。

你需要做什么：

1. 变量以跟踪当前文本，并将其初始化为第一个文本元素
2. 创建我们用于更改文本的函数 - 这基于您现有的代码，并进行以下更改
   a. 如果NextText元素为空，则再次将其设置为第一个元素
   b. 设置下一个元素时，将NextText元素设置为currentText元素
3. 用于setInterval尽可能频繁地调用我们的函数（例如，在下面的示例中每 2 秒一次）

执行此操作的代码，注释引用了上面的数字，以便您了解它在做什么：

// 1. Variable to keep track of the current text
// We initialise this to the first text element
var firstText = $(".text:first-child");
var currentText = firstText;

// 2. Create or function for changing the text
function changeText(){
   $(currentText).css("display", "none");
   var NextText = currentText.next(".text");

   // 2a. If its empty, get the first one again
   if (!NextText.length) NextText =  firstText;
   $(NextText).css("display", "block");

 // 2b. Set the current element to the new one
   currentText = NextText;
}

// call our changeText function every 2 seconds
var loopTimer = setInterval(changeText, 2000);

要在悬停时暂停动画：

1. 在元素上使用hover方法（我已经向animatedText容器添加了一个类并使用了它）
2. 悬停时，清除我们loopTimer以使用停止动画clearInterval
3. 在“mouseLeave”事件中，再次设置我们loopTimer以重新启动动画
   注意：如果您希望动画与下一个元素一起重新启动，changeText()请先调用。

执行此操作的代码：

$('.animatedText').hover(function(e){
    clearInterval(loopTimer);                         // stop animation
}, function(e){
    // If you want to that animation to restart with the NEXT element:
    changeText();
    loopTimer = setInterval( changeText, 2000);       // restart animation
})

工作示例：

var animationDuration = 2000; // 2 seconds

// Variable to keep track of the current text
// We initialise this to the first text element
var firstText = $(".text:first-child");
var currentText = firstText;

function changeText(){
  $(currentText).css("display", "none");

  // Get the next text element
  var NextText = currentText.next(".text");
  // If its empty, get the first one again
  if (!NextText.length) NextText =  firstText;

  // Show the next element and set the current text
  $(NextText).css("display", "block");
  currentText = NextText;
}

// call our changeText function every "animationDuration" seconds
var loopTimer = setInterval( changeText, animationDuration);

$('.animatedText').hover(function(e){
    // stop animation
    clearInterval(loopTimer); 
}, function(e){
     // If you want animation to restart with the NEXT element:
    changeText();
    // restart animation
    loopTimer = setInterval( changeText, animationDuration);
})

.text {
  display: none;
  white-space: pre-wrap;
}

.text:nth-child(1) {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="animatedText">
  <div class="text">1 Text Text Text</div>
  <div class="text">2 Link Link Link</div>
  <div class="text">3 Another Text</div>
  <div class="text">4 More Text</div>
  <div class="text">5 Nearly Done</div>
  <div class="text">6 Last Text</div>
</section>