如何用jQuery实现SVG美国地图州元素的延迟填充效果

核心思路是利用 setTimeout 结合数组遍历，给每个州的填充操作设置递增的延迟时间，就能实现按顺序依次填充的效果。具体实现如下：

优化后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="216px" height="144px" viewBox="0 0 216 144" enable-background="new 0 0 216 144" xml:space="preserve">
<rect x="25.47" y="26.819" fill="#f3f3f3" width="165.059" height="90.361"/>
<rect id="Oregon" x="47.482" y="56.036" fill="#BE1E2D" width="33.936" height="31.928"/>
<rect id="Washington" x="91.032" y="56.036" fill="#BE1E2D" width="33.936" height="31.928"/>
<rect id="California" x="134.582" y="56.036" fill="#BE1E2D" width="33.936" height="31.928"/>
</svg>
<button id="personal-btn">Personal</button>
<button id="commercial-btn">commercial</button>
<button id="reset">reset to red</button>

<script>
jQuery(function($){
    // 通用延迟填充函数
    function fillStatesWithDelay(states, delayMs, color) {
        states.forEach(function(stateId, index) {
            // 每个州的延迟时间 = 基础延迟 * 索引（第一个州0延迟，第二个0.4s，第三个0.8s...）
            setTimeout(function() {
                $('#' + stateId).css({ fill: color });
            }, delayMs * index);
        });
    }

    // 定义州数组和基础延迟
    const stateIds = ['Oregon', 'Washington', 'California'];
    const baseDelay = 400; // 0.4秒，单位毫秒

    $('#personal-btn').on("click", function() {
        fillStatesWithDelay(stateIds, baseDelay, "#68ABDA");
    });

    $('#commercial-btn').on("click", function() {
        fillStatesWithDelay(stateIds, baseDelay, "#858585");
    });

    $('#reset').on("click", function() {
        $('#California, #Oregon, #Washington').css({ fill: "#BE1e2d" });
    });
});
</script>

关键说明 #

• 通用函数复用：fillStatesWithDelay 函数统一处理延迟填充逻辑，接受州ID数组、基础延迟、填充颜色三个参数，避免重复代码，后续添加新州只需修改数组即可。
• 递增延迟原理：通过 delayMs * index 计算每个州的延迟时间，确保每个州在上一个州填充完成后间隔0.4秒执行。
• 替代jQuery delay()：delay() 仅对动画队列中的操作生效，直接修改 css() 不属于动画队列，因此 setTimeout 是更可靠的延迟方案。

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