Javascript 使用jQuery在淡出（小提琴）后为DIV的重新定位设置动画？

为了更好地了解我要做的事情，我有一把小提琴：

当您单击按钮时，3个正方形会淡出，然后由于没有其他正方形，橙色正方形会立即弹出

我想知道是否有一种方法可以使它看起来更流畅，这样橙色的盒子也可以向上滑动

.square {transition: all 0.3s linear;}

这并没有像我预期的那样奏效

更新：

---

将@anied标记为与我一起工作并帮助确定位置的正确答案。不过，每个人的解决方案都很棒，效果也不错+1所有，将不得不尝试一些，看看哪个看起来最好

因此，在这里使用CSS转换的问题是，当橙色框周围的框消失时，没有正在更改的CSS属性-它只是基于这些其他框的更改显示属性在DOM中重新流到新位置。我认为，如果你想让它起作用，你就必须编写一段自定义的jQuery代码，它可以淡出框，但不会立即隐藏框，而是将框向上滑动到看不见的地方

试着这样做：

$('#sort').on('click', function() {
  $('.square').each(function() {
    if (!$(this).hasClass('square-orange')) {
      $(this).animate({'opacity' : 0}, 400, 'swing', function () {
          $(this).slideUp();
      });
    }
  });
});

编辑： 关于跳过-不太确定，但我尝试用自定义替换来替换slideUp，它似乎解决了这个问题：

$('#sort').on('click', function() {
  $('.square').each(function() {
        if (!$(this).hasClass('square-orange')) {
        $(this).animate({'opacity': 0}, 400, 'swing', function() {
            $(this).animate({'height': 0}, 400, 'swing');
      });
    }
  });
});

再次编辑：事实上，现在我看到一个问题是顶部。行中的框向上滑动后仍保持高度。。。。根据您的需求，您可能还需要将其向上滑动

编辑：

好的，上一次，修正了你的位置-我认为这是可行的：

$'sort'。单击，函数{ $'.square'.eachfunction{ 如果！$this.hassclass'square-orange'{ $this.animate{'opacity'：0}，400，'swing'，函数{ $this.animate{'height'：0}，400，'swing'； }; } }; }; .clearfix:之后{ 内容：； 显示：表格； 明确：两者皆有； } .行{ 显示：块； 明确：两者皆有； } .广场{ 宽度：60px； 高度：60px； 显示：块； 浮动：左； 右边距：10px； 边缘底部：10px； } .方红色{ 背景色：红色； } .方蓝{ 背景颜色：蓝色； } .方橙{ 背景颜色：橙色； } .方紫{ 背景颜色：紫色； } 分类{ 边缘顶部：30px； 背景色：4141； 边界：0； 颜色：F2F2； 填充：10px 15px； 光标：指针； 显示：块； }

---

Sort Orange因此，在这里使用CSS转换的问题是，当橙色框周围的框消失时，没有正在改变的CSS属性-它只是基于这些其他框的“更改显示”属性在DOM中重新流到新位置。我认为，如果你想让它起作用，你就必须编写一段自定义的jQuery代码，它可以淡出框，但不会立即隐藏框，而是将框向上滑动到看不见的地方

试着这样做：

$('#sort').on('click', function() {
  $('.square').each(function() {
    if (!$(this).hasClass('square-orange')) {
      $(this).animate({'opacity' : 0}, 400, 'swing', function () {
          $(this).slideUp();
      });
    }
  });
});

编辑： 关于跳过-不太确定，但我尝试用自定义替换来替换slideUp，它似乎解决了这个问题：

$('#sort').on('click', function() {
  $('.square').each(function() {
        if (!$(this).hasClass('square-orange')) {
        $(this).animate({'opacity': 0}, 400, 'swing', function() {
            $(this).animate({'height': 0}, 400, 'swing');
      });
    }
  });
});

再次编辑：事实上，现在我看到一个问题是顶部。行中的框向上滑动后仍保持高度。。。。根据您的需求，您可能还需要将其向上滑动

编辑：

好的，上一次，修正了你的位置-我认为这是可行的：

$'sort'。单击，函数{ $'.square'.eachfunction{ 如果！$this.hassclass'square-orange'{ $this.animate{'opacity'：0}，400，'swing'，函数{ $this.animate{'height'：0}，400，'swing'； }; } }; }; .clearfix:之后{ 内容：； 显示：表格； 明确：两者皆有； } .行{ 显示：块； 明确：两者皆有； } .广场{ 宽度：60px； 高度：60px； 显示：块； 浮动：左； 右边距：10px； 边缘底部：10px； } .方红色{ 背景色：红色； } .方蓝{ 背景颜色：蓝色； } .方橙{ 背景颜色：橙色； } .方紫{ 背景颜色：紫色； } 分类{ 边缘顶部：30px； 背景色：4141； 边界：0； 颜色：F2F2； 填充：10px 15px； 光标：指针； 显示：块； } Orange排序使用以下jquery：

$'sort'。单击，函数{ $row.eq0.cssmin高度，$.square红色高度+px； $.square:not.square-orange.fadeOut.slideUp； $.square red.parent.slideUp；}

使用这个jquery：

$'sort'。单击，函数{ $row.eq0.cssmin高度，$.square红色高度+px； $.square:not.square-orange.fadeOut.slideUp； $.square red.parent.slideUp；}

试试这个：

$('#sort').on('click', function() {
  $('.square').each(function() {
     if (!$(this).hasClass('square-orange')) {
       $(this).animate({
         opacity: 0
       }, 500, function() {
         $(this).slideUp(100);
       });
     } 
  });
});

试试这个：

$('#sort').on('click', function() {
  $('.square').each(function() {
     if (!$(this).hasClass('square-orange')) {
       $(this).animate({
         opacity: 0
       }, 500, function() {
         $(this).slideUp(100);
       });
     } 
  });
});

您可以设置.square-orange的位置，并将排序设置为绝对，然后在.fadeOut开始之前设置top.position.top，在.square:not.square-orange元素动画完成时使用.promise.animate来设置.square-orange的动画

$'sort'。单击，函数{ $this.add.square-orange .每个功能{ $this.css{ 位置：绝对， top:$this.position.top } } $'.square:不是。方形橙色。每个函数{ $this.fadeOut； } 许诺 .Then函数{ 四角橙 .制作动画{ 前20名 }，1000，线性 } }; .广场{ 宽度：60px； 高度：60px； 显示：内联块； } .方红色{ 背景色：红色； } .方蓝{ 背景颜色：蓝色； } .方橙{ 背景颜色：橙色； } .方紫{ 背景颜色：紫色； } 分类{ 边缘顶部：30px； 背景色：4141； 边界：0； 颜色：F2F2； 填充：10px 15px； 光标：指针； } 排序橙色您可以设置.square Orange的位置，并将其排序为绝对值，然后设置top.position.top。在淡出开始之前，使用.promise、.animate来设置动画。当.square:not.square-Orange元素动画完成时，使用.promise、.animate来设置动画

$'sort'。单击，函数{ $this.add.square-orange .每个功能{ $this.css{ 位置：绝对， top:$this.position.top } } $'.square:不是。方形橙色。每个函数{ $this.fadeOut； } 许诺 .Then函数{ 四角橙 .制作动画{ 前20名 }，1000，线性 } }; .广场{ 宽度：60px； 高度：60px； 显示：内联块； } .方红色{ 背景色：红色； } .方蓝{ 背景颜色：蓝色； } .方橙{ 背景颜色：橙色； } .方紫{ 背景颜色：紫色； } 分类{ 边缘顶部：30px； 背景色：4141； 边界：0； 颜色：F2F2； 填充：10px 15px； 光标：指针； }

---

Sort Orange这确实很有效，但是我认为在这个更新的提琴中有一个小的跳转：你知道为什么吗？它看起来像是用@developer solution worked做你的原始解决方案。在slideUpSort中添加“100”-我认为他的解决方案掩盖了这个问题，因为他的向上滑动发生得足够快，以至于你看不到跳跃。问题是因为框是使用内联块定位的，即使它们的高度为0，包含行仍然具有高度。因为slideUp会在最后添加display:none，所以行会突然失去其高度。我正在调整定位，使其更自然地工作。@TimothyFisher我调整了您的定位，使其可以以任何速度自然地向上滑动，现在没有问题。这非常有效，然而，我认为在这个更新的提琴中有一点向顶部略过：你知道为什么吗？它看起来像是用@developernator solution运行了你的原始解决方案。在slideUpSort中添加“100”-我认为他的解决方案掩盖了这个问题，因为他的向上滑动发生得足够快，以至于你看不到跳跃。问题是因为框是使用内联块定位的，即使它们的高度为0，包含行仍然具有高度。因为slideUp会在最后添加display:none，所以行会突然失去其高度。我正在调整定位，使其更自然地工作。@TimothyFisher我调整了您的定位，使其能够以任何速度自然地向上滑动，而现在不会出现问题。是否应该。方形橙色淡出？不，我只想在移除div后将其滑入新位置。是否应该。方形橙色淡出？不，我只想让它滑动在除掉div后进入新的位置，这也会产生一种很酷的效果。每件事都是同时发生的，这是一个很好的选择。这也给了一个很酷的效果。每件事都是同时发生的，这是一个很好的选择。