以下是我的示例:http://jsfiddle.net/MT5xS/
当您单击第一张照片时,它将被删除,并且所有以下图像都会向后移动以填充其留下的空间。但是他们行动得太快,你甚至没有得到他们感动的想法。
我的问题是,如何让这些元素顺利移动?移动或删除图标时,基本上就像iPhone一样,如http://youtu.be/-r7K4LTbI4A?t=27s
我并不担心IE6 / 7/8或任何其他兼容性问题。
答案 0 :(得分:8)
我所知道的最常见的解决方案是动画hide(),然后在回调函数中移除您的图片。
$('.user-pic').live('click', function() {
var $item = $(this).closest('li');
$item.hide('slow', function(){ $item.remove(); });
});
答案 1 :(得分:1)
另一种选择是将fadeTo
0,animate()
图片宽度设为0,然后remove()
。
答案 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();
});
答案 4 :(得分:0)
我认为你想要的是......
$(element).css("visibility", "hidden");
$(element).animate({"width": 0}, "slow", function() {
$(this).remove();
});
答案 5 :(得分:0)
尝试此操作它将向上滑动然后移除
$('.user-pic').live('click', function() {
$(this).closest('li').slideUp('slow', function() {
$(this).remove();
});
});