当值变化时如何重置文本滚动动画？

当event.title接收到新字符串时，即便当前动画正在运行，也必须中断现有动画，使用新字符串重新启动动画。同时需要检查新字符串是否满足(textWidth > $('#line2').width())的条件，动画要采用新字符串的宽度和对应的副本元素。

原实现每次收到新标题时，不会清理旧的动画队列和已创建的副本元素，导致多个动画叠加运行，页面中堆积大量无用的副本节点，最终出现动画混乱的情况。

JavaScript #

var testText = $('.test-text');
var line2 = $('#line2'); // 缓存DOM节点，提升性能

function wallpaperMediaPropertiesListener(event) {
    // 先清理旧状态：停止动画、清除延迟队列、移除副本、重置位置
    testText.stop(true, true).css('margin-left', 0);
    $('.test-text-copy').remove();

    if (!event.title) {
        testText.text('\u200B');
    } else {
        testText.text(event.title);

        var textWidth = testText.outerWidth();
        const gapSize = 30;

        if (textWidth > line2.width()) {
            // 创建新的副本元素
            $('<div></div>')
                .addClass('test-text-copy')
                .css({ 'margin-left': gapSize })
                .insertAfter(testText)
                .text(testText.text());

            function animateText() {
                testText.delay(1000).animate({
                    'margin-left': -(textWidth + gapSize)
                }, {
                    duration: textWidth * 30,
                    easing: 'linear',
                    complete: function() {
                        testText.css('margin-left', 0);
                        animateText();
                    }
                });
            }

            animateText();
        }
    }
}
window.wallpaperRegisterMediaPropertiesListener(wallpaperMediaPropertiesListener);

CSS #

#line2 {
    display: flex;
    margin-bottom: 1.4vh;
    width: 10vh;
    background-color: aquamarine;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(0% 0%);
}

/* 给副本元素加上和原文本一致的样式，保证视觉统一 */
.test-text-copy {
    display: inline-block;
    /* 可根据原.test-text的样式补充字体、字号等属性 */
}

HTML #

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

<p id="line2"><span class="test-text">this is the original text.</span></p>

• 每次处理新标题前，调用testText.stop(true, true)：第一个true清除动画队列，第二个true立即完成当前动画，彻底终止旧动画。
• 移除所有已存在的.test-text-copy元素，避免节点堆积。
• 重置testText的margin-left为0，确保新动画从初始位置开始。
• 缓存$('#line2')节点，避免重复DOM查询，提升性能。
• 补充副本元素的基础样式，保证和原文本视觉一致。

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