jQuery编程挑战#012：生成菜单添加和删除动画效果

jQuery编程挑战#012：生成菜单添加和删除动画效果

<div id="container">
      <li>Java<i class="fa fa-times pull-right"></i></li>
      <li>Javascript<i class="fa fa-times pull-right"></i></li>
      <li>HTML<i class="fa fa-times pull-right"></i></li>
      <li>CSS<i class="fa fa-times pull-right"></i></li>
      <li>PHP<i class="fa fa-times pull-right"></i></li>
    </div>

 /*CSS源代码*/
 @import url('//cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css');

html, body {
  width: 100%;
  height: 100%;
}

body{
  background:#666;
  color: #fff;  
  font-family: 'microsoft yahei',Arial,sans-serif;
}
 
ul{
  list-style:none;
  margin: 0;
  padding: 0;
  position: relative;
}
 
li{
  padding: 10px;
  margin: 2px;
  border: 1px solid #888;
}

.more {
  display: none;
}

var moreTemplate = '<li class="more">添加更多<i class="fa fa-times pull-right"></i></li>';
        var $container = $("#container");

        $("body").click(function(e){
          if($(e.target).hasClass("fa-times")) {
            return false;
          } else {
            var $more = $(moreTemplate);
            $container.prepend($more);
            $more.slideDown();
          }
        });

        $container.on("click", ".fa-times", function(){
          var $row =  $(this).parent();
          $row.animate({"margin-left": "-100%", "margin-right": "100%"}, function(){
            $(this).remove();
          });
        });