Twitch Alert Delay

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中你使用＆＃34; display：none＆＃34;然后在Jquery中，您将在页面加载完成后显示它。

文本将在图像后2秒（2000毫秒）出现。您可以根据需要使用时间

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