【FIR.im赞助】jQuery编程挑战#012：生成菜单添加和删除动画效果
浏览数：37 /
时间：2015年06月09日
定义如下HTML代码：
- <!-- HTML代码片段中请勿添加<body>标签 //-->
- <ul 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>
- </ul>
- <!-- 推荐开源CDN来选取需引用的外部JS //-->
- <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
对应CSS如下：
- /*CSS源代码*/
- @import url(‘//cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css‘);
- 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;
- }
挑战要求
请使用jQuery实现：
- 点击页面，在#container容器元素的起始处添加新的li元素，内容文字为“更多语言”，并且包含一个删除按钮（动画效果为向下滑动出现）
- 点击每一个li对应的删除图标，当前li自动从当前列表中删除（动画效果为向左滑动消失）
提交方式：
- 录制完整代码编写过程或者最终代码：http://www.gbtags.com/gb/rtrecorder.htm
- 本帖中跟帖发布轻视频或者代码地址：http://www.gbtags.com/gb/rtreplayerpreview/189.htm
- 【强烈建议】立刻加入课程QQ群：157757552， 快速通知获奖用户及递交快递联系方式
- 【强烈建议】个人信息中添加“QQ”号码，方便我们快速联系获奖的你
礼品赞助
本期挑战礼品5份（超厚卫衣或者16GU盘）由 FIR.im 鼎力赞助！
FIR.im 专注开发测试效率提升，为开发者提供 App 测试托管分发、实时崩溃分析等产品与服务http://fir.im/
礼品一：卫衣
礼品二：U盘
如何增加获奖机率？
- 最快完成奖一名： 最快保存递交代码
- 最佳讲解奖一名： 代码录制过程及其气泡讲解详细认真
- 最佳人气奖一名： 点赞（点+）的人最多
- 参与及其优胜奖两名
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
