Question

我正在尝试为项目构建Apple样式信使演示。每个配置文件图片，输入气泡和实际的消息气泡都有自己的类。我已经使用jQuery添加延迟来显示和隐藏元素，使其看起来好像是一个合适的信使应用程序。我的问题是它非常微妙，因为整个页面依赖于延迟，如果一个不同步，它会搞砸整个页面。我认为使用队列和出队会对此进行排序，因为我预计每个函数都会运行，然后被踢出队列，确保一切都在正确的时间触发。理想情况下，我希望每个聊天功能彼此独立，并且只有在前一个功能完成后才会触发。

任何关于如何做到这一点的想法都将受到赞赏。

修改

我在将元素出列后移动了要调用的函数。

**编辑2 **

我现在将每个动作归为同一个功能。

这是我的js：

    function chat1() {
    $('div.chat1.jonProfile,div.chat1.bubble.jonBubble,div.chat1.chat-bubble').queue(function () {
      $('div.chat1.jonProfile').show(0);
      $('div.chat1.jonProfile').dequeue();
      $('div.chat1.bubble.jonBubble').hide(0).delay(3000).show(0);
      $('div.chat1.bubble.jonBubble').dequeue();
      $('div.chat1.chat-bubble').show(0).delay(3000).hide(0);
      $('div.chat1.chat-bubble').dequeue();
      chat2();
    });
  }

  function chat2() {
    $('div.chat2.bubble.jonBubble,div.chat2.chat-bubble').queue(function () {
      $('div.chat2.bubble.jonBubble').hide(0).delay(6000).show(0); // 6 Secs
      $('div.chat2.bubble.jonBubble').dequeue();
      $('div.chat2.chat-bubble').hide(0).delay(3000).show(0).delay(3000).hide(0);
      $('div.chat2.chat-bubble').dequeue();
      chat3();
    });
  }

  function chat3() {
    $('div.chat3.julieProfile,div.chat3.chat-bubble,div.chat3.bubble.julieBubble').queue(function () {
      $('div.chat3.julieProfile').hide(0).delay(6000).show(0);
      $('div.chat3.julieProfile').dequeue();
      $('div.chat3.chat-bubble').hide(0).delay(6000).show(0).delay(3000).hide(0);
      $('div.chat3.chat-bubble').dequeue();
      $('div.chat3.bubble.julieBubble').hide(0).delay(9000).show(0);
      $('div.chat3.bubble.julieBubble').dequeue();
    });
  }

// HTML

<div id="chatWindow">
  <div class="chat1 anneProfile"></div>
  <div class="chat1 chat-bubble left">
    <div class="loading">
      <div class="dot one"></div>
      <div class="dot two"></div>
      <div class="dot three"></div>
    </div>
  </div>
  <div class="chat1 bubble jonBubble">
    lorem ipsum
  </div>
  <div class="chat2 chat-bubble left">
    <div class="loading">
      <div class="dot one"></div>
      <div class="dot two"></div>
      <div class="dot three"></div>
    </div>
  </div>
  <div class="chat2 bubble jonBubble">
   lorem ipsum
  </div>

  <div class="clear"></div>

  <div class="chat3 julieProfile"></div>
  <div class="chat3 chat-bubble right">
    <div class="loading">
      <div class="dot one"></div>
      <div class="dot two"></div>
      <div class="dot three"></div>
    </div>
  </div>
  <div class="chat3 bubble julieBubble">
    lorem ipsum
  </div>

// CSS

div#deviceScreen7 {
  //background: url("@{image-path}Screen_7.1_Normal_New.png") no-repeat !important;
  width: 640px;
  height: 1136px;
  display: grid;
  position: absolute;
  top: 0;
  //left: 640px;
  left: 0;
  grid-template-areas: "header" "conversations" "footer";
  grid-template-columns: 20px auto 20px;
  grid-template-rows: 93px 935px auto;
  background: #fff;
  div#scrollBox {
    grid-column-start: 1;
    grid-row-start: 2;
    grid-column-end: 4;
    display: grid;
    grid-template-columns: 20px auto 20px;
    overflow: scroll;
    position: relative;
    div#chatWindow {
      grid-column-start: 2;
      grid-row-start: 1;
      grid-column-end: 3;
      padding-bottom: 30px;
      //height:3000px;
      div.chatbox1{
        positon: relative;
      }
      div.bubble {
        margin-top: 20px;
        border-radius: 25px;
        font-size: 18px;
        font-weight: 400;
        padding: 14px 14px 18px 14px;
        line-height: 18px;
        border: solid 1px #ededed;
        button {
          display: block;
          border-left: solid 1px #f1f1f1;
          border-right: solid 1px #f1f1f1;
          border-bottom: solid 1px #f1f1f1;
          color: #0e71b8;
          background: #fff;
          margin: 0 -15px;
          padding: 10px;
          font-size: 18px;
          font-weight: 600;
          &:first-of-type {
            margin-top: 15px;
            border-bottom: none;
          }
          &.active{
            color: #6c9ccb;
            border-top: solid 2px #f1f1f1;
          }
        }
      }
      .options {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        padding-bottom: 0;
      }

      div.anneProfile {
        background: url("@{image-path}@{sprite-image}") -14px -2087px no-repeat;
        width: 75px;
        height: 75px;
        float: left;
        &.chat1 {
          margin-top: 20px;
        }
      }

      div.anneBubble {
        background: #0E71B8;
        color: #fff;
        position: relative;
        &.chat1 {
          margin-top: 20px;
          margin-left: 95px;
          width: 208px;
        }
        &.chat2 {
          margin-left: 95px;
          width: 338px;
        }

      div.jamesProfile {
        background: url("@{image-path}@{sprite-image}") -104px -2087px no-repeat;
        width: 75px;
        height: 75px;
        float: right;
        &.chat3 {
          margin-top: 20px;
        }
      }
      div.jamesBubble {
        background: #ededed;
        color: #555;
        &.chat3 {
          width: 306px;
          margin-right: 20px;
          float: right;
          text-align: right;
        }
        &.chat4 {
          width: 393px;
          margin-right: 20px;
          float: right;
          text-align: right;
        }
      }
    }
  }
}

将各个jquery函数排队

0 个答案: