6

这是我的例子：http: //jsfiddle.net/MT5xS/

当您单击第一张图片时，它会被删除，并且后面的所有图像都会向后移动以填充它留下的空间。但是它们移动得太快了，你甚至不知道它们移动了。

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

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

4

6 回答 6

8

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

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

演示- 动画元素移除

于 2012-09-08T00:28:39.707 回答
1

另一个选项是fadeTo0，animate()图像宽度为 0，然后remove().

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

于 2012-09-08T00:32:32.773 回答
1

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

它做了我认为你所描述的。您可以使用它或在幕后看看它是如何完成的。我相信他们在所有网格项目上都使用 position: absolute 。

于 2012-09-08T00:36:51.030 回答
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();
});

摆弄

于 2012-09-08T00:26:32.043 回答
0

我想你想要的是...

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

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

于 2012-09-08T00:35:54.097 回答
0

试试这个它会向上滑动然后移除

$('.user-pic').live('click', function() {
  $(this).closest('li').slideUp('slow', function() {
    $(this).remove();
  });
});​
于 2012-09-08T00:36:22.347 回答