我有一张美国Map的SVG。我的目标是在用户单击按钮时填充一些状态。我想不出一种方法来延迟填充，所以每个状态在最后一个状态填充后延迟0.4秒。我认为这与setTimeout有关，但我对JS并不太熟悉。
我希望有一些方法可以做得更好，比如为延迟时间设置一个变量，并在数组中设置div ID。理想情况下，我希望说：

$states = array(Oregon, Washington, California);
$delay = .4;

foreach ($states as $state) {
 /*make a fill change*/
 wait for $delay
}

字符串
这是我到目前为止...我不知道如何做的延迟，所以我试图帮助它的俄勒冈州div，但经过研究，我不相信这是正确的方向。

jQuery(function($){
  $('#personal-btn').on("click", function() {
    $('#Oregon').css({ fill: "#d3d3d3" }).fadeOut( 0 ).css({ fill: "#68ABDA" }).delay(800).fadeIn( 400 );
    $('#California').css({ fill: "#68ABDA" });
    $('#Washington').css({ fill: "#68ABDA" });
  });
  $('#commercial-btn').on("click", function() {
    $('#Oregon').css({ fill: "#858585" });
    $('#California').delay( 800 ).css({ fill: "#858585" });
    $('#Washington').css({ fill: "#858585" });
  });
  $('#reset').on("click", function() {
    $('#California, #Oregon, #Washington').css({ fill: "#BE1e2d" });
  });
});

<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>

的数据

//Populate with <p>s for demo const div = document.querySelector("div"); const pCount = 50; for(let i = 0; i < pCount; i++) { const p = document.createElement("p"); p.innerHTML = i; div.appendChild(p); } //Delay function const delay = async(duration) => { return new Promise((resolve) => { setTimeout(() => { resolve() }, duration); }); }; //Delay with async function, 400ms const delayTime = 400; (async () => { const children = Array.from(div.children); for(let i = 0; i < pCount; i++) { const p = children[i]; p.style.opacity = 0; await delay(delayTime); } })();

div { display: flex; flex-direction: row; flex-wrap: wrap; } p { display: flex; width: 50px; height: 50px; align-items: center; justify-content: center; margin: 0; background: #fcc; }

1条答案

按热度按时间

r7s23pms1#

你可以使用ES6 async vanilla JS函数来实现这一点。在下面的演示中，我创建了一个delay函数，它返回一个promise，该promise在指定的延迟后解析。然后你可以在for循环中await promise resolution（只要你的循环也在异步函数中，这就是为什么它被 Package 在异步lambda中）。
你看到的结果是50个<p>元素一次消失一个，每个元素之间间隔400ms。
这当然是一个演示，您可以将for循环的主体替换为任何您想要的内容，例如更改SVG元素的样式。

<div></div>

赞(0）回复(0）举报 2023-08-04

使用jQuery在SVG上延迟css填充

1条答案

相关问题

热门标签

最新问答