当 Div 向左浮动时动画位置变化答案

【问题标题】：Animate Position Change As Div Floats Left当 Div 向左浮动时动画位置变化
【发布时间】：2016-12-06 14:35:56
【问题描述】：

我有一堆 div 放在一个容器中。当用户单击其中一个时，它们会被删除，并且该 div 下方的一个 div 会滑过以填充它留下的空间，因为它们被设置为 float:left，就像这样 jsFiddle。我希望 div 在移动以填充空间时进行动画处理。是否有 CSS 或 jQuery 函数可以自动执行此操作，还是我必须计算每个 div 当前所在的位置，然后调用某种animateAll() 将它们移动到它们将要的位置？

【问题讨论】：

看到这个jsfiddle.net/CUzNx/87
查看此链接：-stackoverflow.com/questions/26953173/…

标签： javascript jquery html css

【解决方案1】：

添加$(this).addClass('hide').fadeOut(500, function() { $(this).remove(); }); 以在过渡后隐藏和删除该子项

演示：-

$("div").click(function(){
	$(this).addClass('hide').fadeOut(500, function() { $(this).remove(); });
});

div {
  float:left;
  height:20px;
  width:20px;
  margin:5px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
div:hover {
  cursor:pointer;
}
.hide {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background:red;"></div>
<div style="background:orange;"></div>
<div style="background:yellow;"></div>
<div style="background:green;"></div>
<div style="background:blue;"></div>
<div style="background:purple;"></div>

Check this fiddle

【讨论】：

这个也不错

【解决方案2】：

请检查此脚本。

    $("div").click(function(){
$(this).css('opacity',0).animate({
    width: 0,
  }, 1000, function() {
    $(this).remove();
  });
});

【讨论】：

【解决方案3】：

试试这个

 $("#divname").click(function(){
    $("div").animate({"width":"0px"}, "slow",function() {
     $(this).remove();
  });
 });

【讨论】：

【解决方案4】：

你可以使用 jquery 动画

 $("div").click(function(){
        $(this).remove();
        $("div").animate({"left":"0px"}, "slow")
    });

【讨论】：