码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-01 09:24:58      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:

 
申请达人,去除赞助商链接

定义如下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>
  9.  
  10. <!-- 推荐开源CDN来选取需引用的外部JS //-->
  11. <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
 
 

对应CSS如下:

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

挑战要求

请使用jQuery实现:

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

技术分享

提交方式:

礼品赞助

本期挑战礼品5份(超厚卫衣或者16GU盘)由 FIR.im 鼎力赞助!

FIR.im 专注开发测试效率提升,为开发者提供 App 测试托管分发、实时崩溃分析等产品与服务http://fir.im/

礼品一:卫衣

技术分享

礼品二:U盘

技术分享

如何增加获奖机率?

  • 最快完成奖一名: 最快保存递交代码
  • 最佳讲解奖一名: 代码录制过程及其气泡讲解详细认真
  • 最佳人气奖一名: 点赞(点+)的人最多
  • 参与及其优胜奖两名

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

标签:

原文地址:http://www.cnblogs.com/gbtags/p/4382881.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!