Animate/Slow down elements filling space left by removed element

综合技术 CSS3 Recipes (源链)

Here is my example: http://jsfiddle.net/MT5xS/

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 http://youtu.be/-r7K4LTbI4A?t=27s

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

Problem courtesy of: Ashitaka

Solution

Take a look at this jQuery plugin: http://razorjack.net/quicksand/

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

Discussion

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
$el.animate({
  opacity: 0    //plus any other animation you want... height:0, width:0, ...
}, 1000, function() {
  $el.remove();
});

Fiddled

Discussion courtesy of: o.v.

The most common solution I know off is to animate
hide()

, then in the callback function remove your image.

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

DEMO
– Animate element removal

Discussion courtesy of: Fran

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

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

Discussion courtesy of: Derek Hunziker

I think what you want is to…

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

Here is the fiddle http://jsfiddle.net/MT5xS/4/

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() {
    $(this).remove();
  });
});​

Discussion courtesy of: Iori

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

您可能感兴趣的

RN Webview与Web的通信与调试 原文链接: https://mrzhang123.github.io/... React Native Version:0.51 RN 在 0.37 版本中加入了 WebView 功能,所以想要在使用 WebView ,版本必须>=0.37,发送的 message 只能是字符串,...
await vs return vs return await When writing async functions, there are differences between await vs return vs return await , and picking the right one is important. Le...
I’m writing a book: Data Wrangling with Java... I work with JavaScript quite a lot and it shows in this blog, so you won't be surprised to hear that I've been putting together a book that teaches ho...
密码强度的正则表达式(JavaScript)总结... 本文给出了两个密码强度的正则表达式方案,一个简单,一个更复杂和安全。并分别给出了两个方案的解析和测试程序。一般大家可以根据自己的项目的实际需要,自行定义自己的密码正则约定。 前言 用户注册时,都会用到密码正则校验。要写出正确的正则表达式,先要定义表达式规则。 方案1 ...
你不知道的javaScript上卷(第一章 作用域是什么)... 在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉。 本期我给大家讲述的是 前端经典js书籍 <> 第一章内容的知识点总结和讲...
CSS3 Recipes责编内容来自:CSS3 Recipes (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » Animate/Slow down elements filling space left by removed element



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

使用声明 | 英豪名录