Question

我创建了一些通知元素演示，如下所示。正如您所看到的那样，所有的通知div都会出现。当我切换重新加载按钮时，我想让它们一个接一个地出现。到目前为止，我尝试使用toggleClass each元素调用note函数，但是当我点击重新加载按钮时，它根本没有显示。

而且，当我点击其中一个通知上的（x）时，我可以这样做吗，其下的其他通知会向上移动但是顺畅（不像我的代码片段那样跳跃）？

任何帮助表示赞赏！

$(document).ready(function() {
  $(".note-float").addClass("note-float-view");
});


$(".note-content-right").click(function() {
  $(this).parent().fadeOut("slow");
});

$(".load-note").click(function() {
  $(".note-float").toggleClass("note-float-view", 2000);
});

.note-float-view {
  top: 24px !important;
  opacity: 1 !important;
  transition: top 1s, margin-bottom 1s, opacity 1s;
}

.note {
  padding: 14px 8px 14px 20px;
  font-size: 13px;
  margin-bottom: 48px;
  display: table;
  width: calc(100% - 32px);
  position: relative;
  top: 24px;
}

.note-float {
  top: 0;
  opacity: 0;
  margin-bottom: 16px;
  transition: top 1s, margin-bottom 1s, opacity 1s;
}

.note-content-left {
  display: table-cell;
  width: 32px; 
}

.note-content-center {
  display: table-cell;
  width: calc(100% - 64px);
}

.note-content-right {
  display: table-cell;
  width: 12px;
  text-align: center;
  cursor: pointer;
}

.info {
  background-color: #CAF1FF;
  color: #0099ff;
  border: solid 1px #B1DEFF;
}

.success {
  background-color: #DAFDDC;
  color: #117250;
}

.warning {
  background-color: #F8F2D7;
  color: #DD6F1E;
}

.error {
  background-color: #FFE2E2; 
  color: #E9190C;
}

i.fa-info-circle {
  color: #0099ff;
}

i.fa-puzzle-piece,
.close-warning {
  color: #DD6F1E;
}

i.fa-check-circle,
.close-success {
  color: #117250;
}

i.fa-times-circle,
.close-error {
  color: #E9190C;
}

.note-content-right > .fa-times {
  font-size: 11px;
  margin-right: 12px; 
}

a {
  background-color: green;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

  <a class="button green-btn inline-btn load-note">Reload </a>
  
  <div class="note note-float success">
    <div class="note-content-left">
      <i class="fas fa-check-circle"></i>
    </div>
    <div class="note-content-center">
      You have successfully added <b>1 item(s)</b>
    </div>
    <div class="note-content-right">
      <i class="fas fa-times close-success"></i>
    </div>
  </div>

  <div class="note note-float warning">
    <div class="note-content-left">
      <i class="fas fa-puzzle-piece"></i>
    </div>
    <div class="note-content-center">
      You have successfully deleted <b>1 item(s)</b>, but failed to delete <b>1 item(s)</b> 
    </div>
    <div class="note-content-right">
      <i class="fas fa-times close-warning"></i>
    </div>
  </div>

  <div class="note note-float error">
    <div class="note-content-left">
      <i class="fas fa-times-circle"></i>
    </div>
    <div class="note-content-center">
      <b>BPJS TK:</b> Data is used on other module
    </div>
    <div class="note-content-right">
      <i class="fas fa-times close-error"></i>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

尝试迭代setTimeout函数中的note元素，如下所示：

$('[class^="note-content"]').each(function(i) {
    var $this = $(this);
    setTimeout(function() {
        $this.addClass('note-float-view');
    }, i*2000); // delay 2s between each
});

Answer 2

您可以尝试使用回叫方法并在其回调中显示下一张图片。

$( "#book" ).show( "slow", function() {

 $( "#book2" ).show( "slow", function() {

  $( "#book3" ).show( "slow");

  });

  });

此外，您可以使用Jquery超时来延长下一个要显示的图像的等待时间。

逐个显示div元素

2 个答案: