打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
【FIR.im赞助】jQuery编程挑战#012:生成菜单添加和删除动画效果
申请达人,去除赞助商链接

定义如下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. <!-- 推荐开源CDN来选取需引用的外部JS //-->
  10. <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. body{
  4. background:#666;
  5. color: #fff;
  6. font-family: 'microsoft yahei',Arial,sans-serif;
  7. }
  8. ul{
  9. list-style:none;
  10. margin: 0;
  11. padding: 0;
  12. position: relative;
  13. }
  14. li{
  15. padding: 10px;
  16. margin: 2px;
  17. border: 1px solid #888;
  18. }

挑战要求

请使用jQuery实现:

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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
Pull Down for Navigation
Bootstrap每天必学之媒体对象
jQuery实现图片放大预览效果
jQuery基本选择器及用法
jquerymobile 一个容易的九宫格实现(Gallery)
jQuery实现选项卡Tab菜单滚动
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服