Animate/Slow down elements filling space left by removed element

Here is my example:

When you click the first picture, it is removed and all the following images move back to fill the space left by it. But they move too fast and you don’t even get the notion that they moved.

My question is, how do I make these elements move smoothly? Basically like an iPhone when you move or delete an icon, like this

I’m not worried about IE6/7/8 or any other compatibility issues.

Problem courtesy of: Ashitaka


Take a look at this jQuery plugin:

It does what I think you are describing. You could use it or take a look under the covers to see how its being done. I believe they’re using position: absolute on all the grid items.

Solution courtesy of: Mark


Instead of removing the element on click, you want to fade the target element out and then
remove the element. Note this cannot be accomplished by chaining remove
after the desired animation.

If you chose to rely on old school setTimeout()
you have to remember about correct variable scoping. Alternatively you could add a callback to be executed upon animation completion:

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


Discussion courtesy of: o.v.

The most common solution I know off is to animate

, then in the callback function remove your image.

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

– Animate element removal

Discussion courtesy of: Fran

Another option is to fadeTo
0, animate()
the image width to 0, then remove()

Discussion courtesy of: Derek Hunziker

I think what you want is to…

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

Here is the fiddle

Discussion courtesy of: Stuart Wakefield

Try this it will slide up and then remove

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

Discussion courtesy of: Iori

This recipe can be found in it’s original form on Stack Over Flow

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Animate/Slow down elements filling space left by removed element

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录