Question

我有一堆生活在容器内的div。当用户点击其中一个时，系统会将其移除，并在其下方滑动一个div以填充其留下的空间，因为它们设置为float:left，如此jsFiddle。我希望div在移动以填充空间时进行动画制作。是否有CSS或jQuery函数自动执行此操作，或者我是否必须计算每个div当前所处的位置，然后调用某种animateAll()将它们移动到它们将成为的位置？

Answer 1

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

<强>演示： -

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Check this fiddle

Answer 2

请检查此脚本。

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

Answer 3

试试这个

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

Answer 4

你可以使用jquery animate

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

Div离开时动画位置变化

4 个答案: