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

yumo6666个月前 (03-09)技术文章420

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

相关文章

iOS UIView动画实践(一):揭开Animation的神秘面纱

前言在一个看脸的社会中,不论什么事物,长得好看总是能多吸引一些目光。App同样不例外,一款面相不错的App就算功能已经被轮子千百遍,依然会有人买账,理由就是看得顺眼,于是平面设计人员越来越被重视。白驹...

码农玩VR必备!Primitive让你在VR中检查代码

Primitive并不能让用户直接在虚拟现实里写代码,也不能使程序员用普通显示屏就查看到代码的运行效果,但它的确能提高他们的工作效率。对于那些非常宏大的软件项目,它的代码可能有数百万行,使用VR头显查...