Question

当您单击第一张照片时，它将被删除，并且所有以下图像都会向后移动以填充其留下的空间。但是他们行动得太快，你甚至没有得到他们感动的想法。

我的问题是，如何让这些元素顺利移动？移动或删除图标时，基本上就像iPhone一样，如http://youtu.be/-r7K4LTbI4A?t=27s

我并不担心IE6 / 7/8或任何其他兼容性问题。

Answer 1

我所知道的最常见的解决方案是动画hide()，然后在回调函数中移除您的图片。

$('.user-pic').live('click', function() {
    var $item = $(this).closest('li');
    $item.hide('slow', function(){ $item.remove(); });
});

DEMO - 动画元素删除

Answer 2

另一种选择是将fadeTo 0，animate()图片宽度设为0，然后remove()。

http://jsfiddle.net/MT5xS/2/

Answer 3

看看这个jQuery插件：http://razorjack.net/quicksand/

它完成了我认为你所描述的内容。您可以使用它或查看封面以了解它是如何完成的。我相信他们在所有网格项目中使用position：absolute。

Answer 4

您不想在点击时移除元素，而是希望淡出目标元素，然后然后删除元素。请注意，这不能通过在所需动画之后链接remove来实现。

如果您选择依赖旧学校setTimeout()，您必须记住正确的变量范围。或者，您可以添加一个回调以在动画完成时执行：

var $el = $(this).closest('li');    //no need to operate directly on img imo
$el.animate({
  opacity: 0    //plus any other animation you want... height:0, width:0, ...
}, 1000, function() {
  $el.remove();
});

Fiddled

Answer 5

我认为你想要的是......

$(element).css("visibility", "hidden");
$(element).animate({"width": 0}, "slow", function() {
  $(this).remove();
});

这是小提琴http://jsfiddle.net/MT5xS/4/

Answer 6

尝试此操作它将向上滑动然后移除

$('.user-pic').live('click', function() {
  $(this).closest('li').slideUp('slow', function() {
    $(this).remove();
  });
});

动画/减慢元素填充被删除元素留下的空间

6 个答案:

DEMO - 动画元素删除