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

来源：互联网发布：淘宝化妆品韩国女模特编辑：程序博客网时间：2024/06/05 18:58

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

0 0