A Pen by fusionBin.

Gtlaz.markdown

Gtlaz

A Pen by fusionBin on CodePen.

License.

index.html

<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>

script.js

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);

style.css

#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;}