代码之家  ›  专栏  ›  技术社区  ›  Dolorosa

jquery animate top不工作

css html jquery
  •  0
  • Dolorosa  · 技术社区  · 7 年前

    我创建了三个矩形,如下所示。我想当我点击 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>
    1 回复  |  直到 7 年前
        1
  •  3
  •   Daniel Beck    7 年前

    这个 top: 24px !important; 在 .note-float-view 正在覆盖动画。移除 !important 就足够了。

    我还更新了“重置”功能,将所有项目的顶部设置回24px,而不是动画离开的地方。(不过,最好是在动画本身结束时对单个项目执行此操作。) 

    $(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)来删除元素;然后您就不需要进行任何手动定位了。

    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    4 月前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    4 月前
    magenta placenta  ·  将css变量合并为一个变量
    4 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    5 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    5 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    5 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    5 月前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    5 月前
    Luckkks  ·  过渡色工作不正常
    5 月前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    5 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号