求助：如何实现单句中单个单词的循环淡入淡出？排查代码问题

Hey there! Let's troubleshoot your single-word fade-out loop issue step by step. First, let's spot some quick issues in the code snippet you shared, then walk through a working implementation.

First: Fix the Syntax Issues in Your Snippet #

The code you provided has a couple of critical syntax problems that might be breaking things right away:

• Invalid DOCTYPE: <DOCTYPE> is incorrect — it should be <!DOCTYPE html> (note the exclamation mark and full tag name).
• Incomplete jQuery CDN: Your Google CDN link cuts off (https://ajax.googleapis.c...), which means jQuery isn't loading properly. Use a full, valid link like https://code.jquery.com/jquery-3.3.1.min.js.

Working Implementation for Word-by-Word Fade Loop #

Here's a complete, tested example that creates a loop where each word in a sentence fades out one by one, then resets and repeats:

HTML #

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Word Fade Loop</title>
    <link rel="stylesheet" href="main.css">
    <!-- Load jQuery correctly -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="sentence">
        Este es un ejemplo de frase con efecto de desvanecimiento
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS (main.css) #

.sentence {
    font-size: 24px;
    line-height: 1.5;
}

.sentence span {
    display: inline-block;
    transition: opacity 0.5s ease; /* Smooth fade transition */
}

.sentence span.fade-out {
    opacity: 0;
}

JavaScript (script.js) #

$(document).ready(function() {
    // Split the sentence into individual word spans
    const sentence = $('.sentence');
    const words = sentence.text().split(' ');
    sentence.empty(); // Clear original text
    
    // Wrap each word in a span
    words.forEach(word => {
        sentence.append(`<span>${word} </span>`);
    });

    // Function to handle the fade loop
    function fadeWords() {
        const wordSpans = $('.sentence span');
        let index = 0;

        // Recursive function to fade each word one by one
        function fadeNext() {
            if (index >= wordSpans.length) {
                // Reset all words after the last one fades
                setTimeout(() => {
                    wordSpans.removeClass('fade-out');
                    fadeWords(); // Restart the loop
                }, 1000); // Wait 1 second before resetting
                return;
            }

            // Fade the current word
            $(wordSpans[index]).addClass('fade-out');
            index++;

            // Wait 800ms before fading the next word
            setTimeout(fadeNext, 800);
        }

        fadeNext();
    }

    // Start the loop
    fadeWords();
});

Key Checks to Ensure It Works #

• jQuery Loads: Double-check that the jQuery script tag points to a valid, complete URL (the example above uses the official jQuery CDN).
• DOM Ready: Make sure your JavaScript runs after the page loads — wrapping code in $(document).ready() ensures this.
• CSS Specificity: Ensure no other CSS rules are overriding the opacity or transition properties on your word spans.
• Spacing: When splitting words, we add a space after each span to keep the sentence formatting natural.

If you were modifying existing code, compare it to this example to spot differences: maybe you weren't wrapping words in individual elements, or your loop logic wasn't resetting properly after completing a full cycle.

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