Twitch警报延迟

Question

我正在尝试为我显示的一些文本添加延迟。出现一个图像，然后我希望文本在X次之后出现。

这是我当前的代码，它同时显示图像和文本。我不太熟悉如何让它工作，所以任何帮助都是很好的。我这样做只是为了让我的流看起来更好！

谢谢你们

#notification {
  font-family: 'Roboto';
  font-size: 24px;
}

.image-container {
  width: 100%;
  height: 100%;
}

#notification .image {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.subtitle {
  font-size: 24px;
  color: #FFFFFF;
}

.video {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.title {
  color: #FFFFFF;
}


.text-container {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  text-shadow: 0px 0px 1px #000000, 0px 0px 2px #000000, 0px 0px 3px #000000, 0px 0px 4px #000000, 0px 0px 5px #000000;
}

.tts {
  display: none;
}

.keyword:not(.user_message) {
  color: #FF9F9F;
}




<div class="notification-container">
  <div class="image-container">
    <!--
      Adding an <img> tag to this section with class="image" will give it the
      default styling of this alert layout. You may either hardcode the image
      URL, or use the variable "{image}" to have the URL of any image you
      have uploaded on the Media tab automatically inserted.

      For example:
      <img class="image" src="https://mbt-user-upload.s3.amazonaws.com/uncodinatx/muxy-character.svg" />

      Or
      <img class="image" src="{image}" />

      If you have uploaded a webm video instead, use the "{video}" variable inside a <video> tag to have its URL automatically inserted.

      For example:
        <video class="video" autoplay loop muted="true">
          <source src="{video}" type="video/webm">
        </video>
    -->

      <img class="image" src="{image}" />

  </div>

  <div class="text-container">
    <div class="title">
      <span class='keyword name'>{name}</span> has just subscribed!
    </div>

    <div class="subtitle">
      <span class='keyword user_message'>{user_message}</span>
    </div>
  </div>

  <div class="tts">
    <!--
      Any text placed inside this div will be spoken using your selected
      Text-To-Speech voice when the alert is shown. Note that by default
      Text-To-Speech is disabled, so you will have to enable it on the Media
      tab.
    -->
    {tts_user_message}
  </div>

  <!--
    Adding any audio tag to your markup will play it automatically when
    the alert is shown. Note that you should not add the 'autoplay' attribute
    so that we can control exactly when the audio file plays. If you have
    specified an audio alert in the Media tab (either one provided by us, or
    a custom sound you have uploaded) you can have the source URL of that file
    inserted automatically by using the '{audio}' variable.

    For example:
    <audio src='https://u.muxy.dev/assets/sounds/alert-sounds/Bloom.mp3'></audio>

    Or
    <audio src='{audio}'></audio>
  -->

</div>

Answer 1

复制并运行此命令。

在css中使用" display :none“属性，然后在Jquery中，您将在页面加载完成时显示它。

文本将出现在图像后2秒(2000ms)。你可以根据你的需要调整时间。

<style type="text/css">

/*edited*/

#text{
 display: none;
 color: red;
}
/*edited end*/

#image{
    width: 300px;
    display: none;
}

</style>

 <!-- image -->
  <div >
      <img id ="image" src="https://tinyjpg.com/images/social/website.jpg" />
  </div>

<!-- text -->
 <p id="text">Hello user</p>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {
      if($("#image").is(":hidden")){ 
        $("#image").show(100,function(){
         $("#text").delay(2000).show(100);

        });
      }
    });


</script>