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

时间:2012-09-08 00:22:40

标签: javascript jquery css css3

以下是我的示例:http://jsfiddle.net/MT5xS/

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

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

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

6 个答案:

答案 0 :(得分:8)

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

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

DEMO - 动画元素删除

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

您不想在点击时移除元素,而是希望淡出目标元素,然后然后删除元素。请注意,这不能通过在所需动画之后链接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

答案 4 :(得分:0)

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

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

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

答案 5 :(得分:0)

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

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