Skip to content

Instantly share code, notes, and snippets.

@iahu
Created Mar 24, 2014
Embed
What would you like to do?
A Pen by fusionBin.
<script src="//cdnjscn.b0.upaiyun.com/libs/jquery/2.1.0/jquery.js"></script>
<div id="container">
<div id="top-bar">
<a href="javascript:;" id="delBtn">RecycleIcon</a>
</div>
<ul id="list">
<li class="li">
1xxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
</li>
<li class="li">
2xxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
</li>
<li class="li">
3xxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
</li>
<li class="li">
4xxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
</li>
<li class="li">
5xxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
</li>
<li class="li">
6xxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
</li>
<li class="li">
7xxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
</li>
<li class="li">
8xxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
</li>
<li class="li">
9xxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
</li>
<li class="li">
10xxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
xxxxxxxxxxxxxxxxxxxx<br />
</li>
</ul>
</div>
var lis = $('.li');
var btn = $('#delBtn');
var btnLeft = btn.position().left + btn.width();
var btnTop = btn.position().top - btn.height()/2;
var action = function(event){
var $this = $(this),
$clone = $(this).clone().insertAfter($this); // 复制一份做动画用
// 透明
$this.css('opacity', 0);
$clone.css({
position: 'absolute',
left: $this.position().left,
top: $this.position().top,
width: $this.width(),
height: $this.height()
});
// 动画效果
$this.slideUp(600);
$clone.animate({
opacity: 0,
width: 0,
height: 0,
left: btnLeft,
top: btnTop
}, 600, function(){
$this.hide();
$clone.remove();
});
};
lis.bind('click', action);
#top-bar {text-align: right;background-color: #ccc;padding: 5px 3px;}
#list {padding:0;margin:0;}
.li {padding:10px; margin:10px 0; list-style:none;border:3px solid #aaa;background-color: #f2f2f2;color:#666;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment