jQuery编程挑战#012:生成菜单添加和删除动画效果

boyanx2个月前技术教程13

定义如下HTML代码:

  • Java

  • Javascript

  • HTML

  • CSS

  • PHP

<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

标签: jq cdn

相关文章

身为现代前端人员,不懂响应式怎么行?

响应式网页的话题随着如今移动互联网的盛行又被推到了很重要的位置,有相关人士预计,移动互联网的数据流量将在2015年超越桌面端的流量。你一定听说过,我们目前正处在“后PC时代”,这对于前端开发人员来说,...

高性能web建站规则(CDN)

知道CDN(Content Delivery Network,其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定),也不过三个月,实在惭愧,这让我觉得传...

ASP.NET Core 内置的Tag Helpers

ASP.NET Core 框架内置了大量的Tag Helpers,以asp-*前缀开始,他们用于增强表单,验证消息,设计布局等,在这节中我们将继续讨论内置的Tag Helpers,例如表单控件,输入控...

BootStrap简介及应用要点

BootStrap简介BootStrap是基于HTML、CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架,他是后端程序员的福音,使它们只需要专注业务逻辑,...

开源库的免费CDN

BootCDN稳定、快速、免费的前端开源项目 CDN 加速服务共收录了 3578 个前端开源项目BootCDN 是 猫云 联合 Bootstrap 中文网 共同支持并维护的前端开源项目免费 CDN 服...

前端容易理解错的跨域原理

关于跨域这件事,自从我遇到后,了解一下,这事就过去了。我也一直认为这是个小问题,大家应该都懂。直到我要教妹妹前端时遇上这个问题才发现,这个问题得整个逻辑讲出来其实还挺绕的。知道问题怎么解决很简单,但是...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。