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

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

定义如下HTML代码：

<ul id="container">
<li>Java</li>
<li>Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<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盘

如何增加获奖机率？

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

转载于:https://www.cnblogs.com/gbtags/p/4382881.html

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

html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
jQuery添加css样式/动画效果
目录 jQuery操作css: css属性: 动画: 停止动画: 尺寸: 父/子/兄弟元素: 父元素: 子元素: 兄弟元素: 过滤: 遍历: jQuery操作css: addClass() - 向被选 ...
jquery 沟选项获取点击添加和删除的数据
var push = new Array(); var del = new Array(); $("body").delegate('.relevance', 'change', ...
jquery动态绑定事件的方法_Jquery绑定事件及动画效果
绑定事件 bind(type, data, fuc) one(type, data, fuc) //只执行一次常见事件类型名称含义blur失去焦点focus获得焦点load加载resize重置大小 ...
GO Web编程---网上书店(4.1) 添加、删除、更新图书
上一篇讲了查询图书并且分页,那是在图书管理那里,那么我们接着讲图书的管理. 完成后项目结构实现的功能如下: 1.删除图书在bookhandler.go新加一个函数 //DeleteBook 删除图 ...
jQuery前端开发学习指南(18)——利用jQuery实现元素的隐藏、显示和切换及其动画效果
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 概述在jQuery框架中可便捷地以动画形式隐藏和显示以及切换元素,常用方式有如下三种:默认方 ...
【看完想不会都难系列教程】 - （1）使用CSS3+JQuery easing 插件制作绚丽菜单
在本教程中,我们将创建一个独特的滑动框导航.这样做可以让有菜单的盒子滑出,并且弹出缩略图.在某些菜单项中我们还包含着有进一步链接的子菜单.取决于我们鼠标在菜单项上的停悬,子菜单将向左或向右滑动. 我们 ...
写给大忙人看的jQuery动画效果
文章目录一.基本动画效果 1.隐藏匹配元素 2.显示匹配元素 3.自动切换显示或隐藏状态例子:实现自动隐藏菜单二.淡入.淡出动画效果例子:使用fadeTo实现图片颜色变淡三.滑动效果 1.滑 ...
【OneAPM】极客编程挑战#025：发挥想象生成漂亮炫酷的SVG动画效果
活动链接:http://www.gbtags.com/gb/share/5610.htm 本期挑战提供如下的SVG图形,请使用任何技术生成基于如下SVG图形的动画效果,看看谁设计的动画效果最酷 ~~ ...
有哪些好的刷题网站？2018年最受欢迎的编程挑战网站
本文转自 https://blog.csdn.net/UzV80PX5V412NE/article/details/78653695 2018年最受欢迎的编程挑战网站 1.TopCoder 2.Cod ...

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

挑战要求

提交方式：

礼品赞助

如何增加获奖机率？

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

最新文章

热门文章