使用jQuery快速切换类实现标题逐个短暂变红的循环效果求助

Hey there! Let's get that "逐个短暂变红" (marquee-like red highlight) effect working properly for you. The main issues with your current code are that jQuery's delay() doesn't work with non-animation methods like toggleClass, and your synchronous each loop doesn't create the sequential delay you need. Here's how to fix it:

First, Let's Break Down the Problems #

• delay() only affects operations in jQuery's animation queue—toggleClass isn't part of that queue, so your delays weren't actually pausing the class changes.
• The each loop runs instantly, so all headlines tried to toggle the class at almost the same time instead of one after another.
• You had duplicate function definitions and $(document).ready blocks, which were overriding each other and causing confusion.

Working Solution Code #

Here's a cleaned-up, functional version that creates the sequential, looping highlight effect:

HTML

<div class="left">
  <div class="content">
    <h1>headline 1</h1>
    <h1>headline 2</h1>
    <h1>headline 3</h1>
    <h1>headline 4</h1>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

CSS

body { 
  background-color: darkgrey; 
  color: black; 
}
.left .content h1 { 
  /* Shorter transition for snappier highlight effect */
  -webkit-transition: color 0.3s; 
  transition: color 0.3s; 
}
.hover { 
  color: red; 
}
/* Removed the :hover rule since we're using a class for the controlled effect */

JavaScript

$(document).ready(function() {
  const headlines = $(".content h1");
  let currentIndex = 0;

  function highlightNextHeadline() {
    // Clear highlight from all headlines first to avoid overlaps
    headlines.removeClass('hover');
    // Apply highlight to the current headline
    $(headlines[currentIndex]).addClass('hover');
    
    // Move to next headline, loop back to first when we reach the end
    currentIndex = (currentIndex + 1) % headlines.length;
    
    // Keep the highlight for 1 second, then remove it and trigger the next one
    setTimeout(() => {
      $(headlines[currentIndex - 1]).removeClass('hover');
      setTimeout(highlightNextHeadline, 1000);
    }, 1000);
  }

  // Start the effect immediately, and restart the full loop every 4 seconds
  highlightNextHeadline();
  setInterval(highlightNextHeadline, 4000);
});

How This Works #

1. We store all headlines in a variable to avoid re-selecting them repeatedly.
2. The highlightNextHeadline function handles one headline at a time:
   • Resets all headlines to their default color.
   • Turns the current headline red by adding the hover class.
   • Uses setTimeout to pause, then removes the highlight and moves to the next headline.
   • Uses modulo % to loop back to the first headline after the last one.
3. We start the effect right away and set an interval to restart the full loop on a timer.

Customization Tips #

• Adjust the 1000 values in setTimeout to change how long each headline stays red (first value) and the delay between highlights (second value).
• Tweak the 4000 in setInterval to adjust how often the full sequence repeats.
• Modify the CSS transition duration to make the color change faster or slower.

内容的提问来源于stack exchange，提问作者FinSilence