时间戳

首页 > 解决方案 > jquery动画顶部不起作用

jquery - jquery动画顶部不起作用

问题描述

我正在创建三个矩形，如下所示。我想这样做，所以当我单击close矩形右侧的按钮时，它会消失（我已经完成了），并且它下面的每个矩形都会向上移动以填充空白空间（我仍然有问题）。到目前为止，我已经尝试过这个 

$(".note-content-right").click(function() {
  $(this).parent().removeClass("note-float-view");
  var thisDataIndex = $(this).parent().attr("data-index");
  $(".note-float").each(function() {
    if(($(this).hasClass("note-float-view")) && ($(this).attr("data-index") > thisDataIndex)) {
      $(this).animate({
        "top" : "-=54px"
      });
    };
  });
});

但它不起作用。

任何帮助表示赞赏！:)

$(document).ready(function() {
  $(".note-float").removeClass("note-under");
  loadNote();
});

function loadNote() {
  $(".note-float").each(function(index) {
    var el = $(this); 
    setTimeout(function () {
      el.addClass("note-float-view");
    }, index * 200);
  });
}

function unloadNote() {
  $(".note-float-view").each(function(index) {
    var el = $(this); 
    setTimeout(function () {
      el.removeClass("note-float-view");
    }, index * 200);
  });
}

$(".note-content-right").click(function() {
  $(this).parent().removeClass("note-float-view");
  var thisDataIndex = $(this).parent().attr("data-index");
  $(".note-float").each(function() {
    if(($(this).hasClass("note-float-view")) && ($(this).attr("data-index") > thisDataIndex)) {
      $(this).animate({
        "top" : "-=54px"
      });
    };
  });
});

$(".load-note").click(function() {
  $(".note-float").removeClass("note-under");
  $(".note-float").removeClass("note-float-view");
  setTimeout(function() {
    loadNote();
  }, 500);
});
.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: 0 auto 48px;
  display: table;
  width: 768px;
  position: relative;
  top: 24px;
  font-family: 'Open Sans', sans-serif;
}

.note-float {
  top: 0;
  opacity: 0;
  margin-bottom: 8px;
  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; 
}

.dropdown-for-note {
  margin: 0 auto; 
  width: 366px;
}

.select-info {
  top: 8px;
  width: 366px;
}

.load-note {
  margin: 0 auto; 
  text-align: center;
}

.load-note:hover {
  color: #333;
  text-decoration: none;
}

.note-wrapper {
  display: block;
  width: 100%;
}

.caption {
  font-family: 'Open Sans', sans-serif;
}

.select-caption {
  margin-top: 24px; 
}

.load-btn-wrapper {
  width: 100%;
  display: block;
  text-align: center;
  margin-top: 48px;
}

.form-unit {
  font-family: 'Open Sans', sans-serif;
}

@media (max-width: 767px) and (min-width: 576px) {
  .note {
    width: calc(100% - 32px); 
    margin-left: 16px;
  }
  
  .select-info {
    width: 366px;
    margin: 0 auto;
  }
}

@media (max-width: 575px) {
  .note,
  .select-info {
    width: calc(100% - 32px); 
    margin-left: 16px;
  }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="note-wrapper">

  
  <div class="note note-float success" data-index="1">
    <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" data-index="2">
    <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" data-index="3">
    <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 class="load-btn-wrapper">
    <a class="button white-btn footer-btn load-note">Reload </a>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

标签： jqueryhtmlcss

解决方案

top: 24px !important;on.note-float-view覆盖动画。删除!important就足够了。

我还更新了“重置”功能，将所有项目的顶部设置回 24 像素，而不是动画恰好离开的位置。（不过，在动画本身结束时对单个项目执行此操作可能会更好。）

$(document).ready(function() {
  $(".note-float").removeClass("note-under");
  loadNote();
});

function loadNote() {
  $(".note-float").each(function(index) {
    var el = $(this);
    setTimeout(function() {
      el.addClass("note-float-view");
    }, index * 200);
  });
}

function unloadNote() {
  $(".note-float-view").each(function(index) {
    var el = $(this);
    setTimeout(function() {
      el.removeClass("note-float-view");
    }, index * 200);
  });
}

$(".note-content-right").click(function() {
  $(this).parent().removeClass("note-float-view");
  var thisDataIndex = $(this).parent().attr("data-index");
  $(".note-float").each(function() {
    if (($(this).hasClass("note-float-view")) && ($(this).attr("data-index") > thisDataIndex)) {
      $(this).animate({
        "top": "-=54px"
      });
    };
  });
});

$(".load-note").click(function() {
  $(".note-float")
    .removeClass("note-under")
    .removeClass("note-float-view")
    .css("top","24px");
  
  setTimeout(function() {
    loadNote();
  }, 500);
});
.note-float-view {
  top: 24px ;
  opacity: 1 !important;
  transition: top 1s, margin-bottom 1s, opacity 1s;
}

.note {
  padding: 14px 8px 14px 20px;
  font-size: 13px;
  margin: 0 auto 48px;
  display: table;
  width: 768px;
  position: relative;
  top: 24px;
  font-family: 'Open Sans', sans-serif;
}

.note-float {
  top: 0;
  opacity: 0;
  margin-bottom: 8px;
  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;
}

.dropdown-for-note {
  margin: 0 auto;
  width: 366px;
}

.select-info {
  top: 8px;
  width: 366px;
}

.load-note {
  margin: 0 auto;
  text-align: center;
}

.load-note:hover {
  color: #333;
  text-decoration: none;
}

.note-wrapper {
  display: block;
  width: 100%;
}

.caption {
  font-family: 'Open Sans', sans-serif;
}

.select-caption {
  margin-top: 24px;
}

.load-btn-wrapper {
  width: 100%;
  display: block;
  text-align: center;
  margin-top: 48px;
}

.form-unit {
  font-family: 'Open Sans', sans-serif;
}

@media (max-width: 767px) and (min-width: 576px) {
  .note {
    width: calc(100% - 32px);
    margin-left: 16px;
  }
  .select-info {
    width: 366px;
    margin: 0 auto;
  }
}

@media (max-width: 575px) {
  .note,
  .select-info {
    width: calc(100% - 32px);
    margin-left: 16px;
  }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="note-wrapper">


  <div class="note note-float success" data-index="1">
    <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" data-index="2">
    <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" data-index="3">
    <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 class="load-btn-wrapper">
    <a class="button white-btn footer-btn load-note">Reload </a>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

作为旁注，如果这些项目内的文本换行到另一行，则为位置设置动画的硬编码 54px 量不起作用。您可能希望捕获已移除元素的高度，然后从以下元素中按该高度进行动画处理。

一般来说，最好尽可能避免对像素值进行硬编码，并尽可能避免依赖绝对定位，因为它往往涉及大量像这样的繁琐重新定位。如果您改为依赖文档流，浏览器将为您完成大部分工作。例如，对于这种情况，我会通过将元素的最大高度动画化为零来删除元素（使用隐藏的溢出-y）；那么您根本不需要进行任何手动定位。

推荐阅读