Question

我正在尝试使用SVG和JavaScript开发一个简单的动画。我有一个“按钮”，它正在运行一个onclick函数来隐藏“开始”按钮并开始动画。

我在使用时基功能时遇到问题，基本上我有一个“气泡框”，在该气泡框中会出现一些文本，就像动画在与用户交谈一样，有点像对话，不久后该文本消失了并出现一个新的位置。

问题在于，按下“开始”按钮后，文本显示半秒钟，然后消失。它应该出现在按下“开始”按钮之后，然后，例如5秒钟，它再次消失。

这是我到目前为止所做的，所有内容都在SVG标签内。

 <rect id="startButton" style="cursor:pointer;" x="200" y="150" rx="5" height="25" width="80" fill="white" stroke="white" stroke-width="1" onclick="startAni()"/>
    <text id="startText" style="cursor:pointer;" x="215" y="170" fill="black" onclick="startAni()">START</text>

    <script>
        function startAni(){

            document.getElementById("textLine1").style.display="inline-block";
            document.getElementById("startButton").style.display="none";
            document.getElementById("startText").style.display="none";

            window.setTimeout(function(){textBubble(); 50000})

            function textBubble(){
                document.getElementById("textLine1").style.display="none";

            }

        }
    </script>

这是“气泡框”

<text id="textLine1" x="300" y="175" fill="white">WHY?</text>

对于CSS，这就是我对textLine1的了解

#textLine1{
display:none;

}

我对如何实现此目标有新的想法，但是我想使用JavaScript，SVG或CSS。 JQuery并非没有问题，但由于我不熟悉它，因此我暂时不希望使用它。

谢谢。

Answer 1

您的计时器放置在错误的位置，更具体地说，您的大括号关闭了该功能。也不需要考虑功能，只需传递textBubble。

window.setTimeout(textBubble, 50000);

x时间后再次运行JavaScript函数

1 个答案: