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

最新推荐文章于 2025-08-08 15:46:05 发布

原创最新推荐文章于 2025-08-08 15:46:05 发布 · 556 阅读

0 ·

CC 4.0 BY-SA版权

本文展示了如何使用jQuery实现菜单项的添加和删除动画效果，包括使用CSS进行样式设置，并通过事件监听实现交互逻辑。

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