当前位置:首页 > 技术分析 > 正文内容

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

定义如下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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/4663.html

标签: jq添加元素
分享给朋友:

“jQuery编程挑战#012:生成菜单添加和删除动画效果” 的相关文章

智能计费、综合管控,爱博精电帮您快速构建水电费预付费管理系统

近年来,随着企业经营管理意识的加强,商业建筑的物业管理部门对于水电费的收缴越来越重视,在实际运营中,因为服务、管理或其他方面的纠纷,商户拖欠电费的情况时有发生,管理部门为了消除收费难、垫付水电费过多、偷窃电等诸多难题,急需改变传统水电费收缴方式。但是常规的水电预付费改造面临着改造难度大、改造周期长、...

GitLab-创建分支

描述分支是独立的生产线,是开发过程的一部分。分支的创建涉及以下步骤。创建一个分支步骤1-登录您的GitLab帐户,然后转到“ 项目”部分下的项目。步骤2-要创建分支,请单击“ 存储库”部分下的“ 分支”选项,然后单击“ 新建分支”按钮。步骤3-在“ 新建分支”屏幕中,输入分支的名称,然后单击“ 创建...

掌握版本控制:Git的那些常见用法与技巧

Git作为现代开发中最常用的版本控制系统,它的普及和高效性使得程序员几乎每天都在与它打交道。无论是个人项目,还是团队协作,Git都能帮助我们追踪代码的修改历史,保证代码版本的管理井井有条,并在多人协作时有效地避免冲突。本文将分享一些常见的Git用法与技巧,帮助你更好地掌握Git的强大功能,并提升你在...

Solid State Logic 发布低保真数字失真插件 Digicrush

Solid State Logic 宣布推出低保真数字失真插件 Digicrush ,他们最新的创意工具具有经典数字失真的粗糙、低保真特性,完美模拟早期数字音频的衰减和伪影。Digicrush 充满怀旧气息,深受经典数字采样器和效果器的影响,具有内置抖动、可调比特深度和采样率降低功能,是为音轨添加复...

USB电池充电基础:应急指南

USB为便携设备供电与其串行通信功能一样,已经成为一种标准应用。如今,USB 供电已经扩展到电池充电、交流适配器及其它供电形式的应用。应用的普及带来的一个显著效果是便携设备的充电和供电可以互换插头和适配器。因此,相对于过去每种装置都采用专用适配器的架构相比,目前的解决方案允许采用多种电源进行充电。毋...

前端路由简介以及vue-router实现原理

作者:muwoo 来源:https://zhuanlan.zhihu.com/p/37730038后端路由简介路由这个概念最先是后端出现的。在以前用模板引擎开发页面时,经常会看到这样http://www.xxx.com/login 大致流程可以看成这样:浏览器发出请求服务器监听到80 端口(或443...