你的位置：
首页
>
软件开发 >
Java > 【FIR.im赞助】jQuery编程挑战#012：生成菜单添加和删除动画效果
【FIR.im赞助】jQuery编程挑战#012：生成菜单添加和删除动画效果
发布时间：2015-04-01 09:02:24
申请达人，去除赞助商链接定义如下HTML代码：<!-- HTML代码片段中请勿添加<body>标签 //--><ul id="container"> <li>Java<i class="fa fa ...
定义如下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='/images/loading.gif' data-original="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自动从当前列表中删除（动画效果为向左滑动消失）
原标题：【FIR.im赞助】jQuery编程挑战#012：生成菜单添加和删除动画效果
关键词：jquery
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
