logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

【FIR.im赞助】jQuery编程挑战#012：生成菜单添加和删除动画效果

 昵称10504424 2015-04-01
申请达人，去除赞助商链接

定义如下HTML代码：

  1. <!-- HTML代码片段中请勿添加<body>标签 //-->
  2. <ul id="container">
  3. <li>Java<i class="fa fa-times pull-right"></i></li>
  4. <li>Javascript<i class="fa fa-times pull-right"></i></li>
  5. <li>HTML<i class="fa fa-times pull-right"></i></li>
  6. <li>CSS<i class="fa fa-times pull-right"></i></li>
  7. <li>PHP<i class="fa fa-times pull-right"></i></li>
  8. </ul>
  10. <!-- 推荐开源CDN来选取需引用的外部JS //-->
  11. <script type="text/javascript" src="http://cdn./jquery/1.11.1/jquery.min.js"></script>

对应CSS如下：

  1. /*CSS源代码*/
  2. @import url('//cdn./font-awesome/4.1.0/css/font-awesome.min.css');
  4. body{
  5. background:#666;
  6. color: #fff;
  7. font-family: 'microsoft yahei',Arial,sans-serif;
  8. }
  10. ul{
  11. list-style:none;
  12. margin: 0;
  13. padding: 0;
  14. position: relative;
  15. }
  17. li{
  18. padding: 10px;
  19. margin: 2px;
  20. border: 1px solid #888;
  21. }

挑战要求

请使用jQuery实现：

  1. 点击页面，在#container容器元素的起始处添加新的li元素，内容文字为“更多语言”，并且包含一个删除按钮（动画效果为向下滑动出现）
  2. 点击每一个li对应的删除图标，当前li自动从当前列表中删除（动画效果为向左滑动消失）

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 昵称10504424 > 《工作》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多