jQuery CSS3动画列表项增删效果
jQuery 加 CSS3 动画的元素增删功能,真的是前端开发里一个实用的小技巧。你只要写过交互式列表,像任务清单、评论列表、动态内容这种,就肯定碰到过。这个资源用挺方式,把新增和删除列表项的过程讲得挺清楚,还加了平滑动画,用户体验一下就上来了。
jQuery的操作确实方便,像append()
、remove()
都顺手。再配上slideDown()
、slideUp()
这种动画方法,页面的交互感直接拉满。而且动画部分也用上了CSS3的transition
,浏览器兼容性还不错。
场景典型,一个
里面动态加,点个按钮就能看到元素滑出来或淡出,比较适合用在小工具、简单后台系统,甚至是早期的移动端项目里。代码结构也挺清爽,哪怕是刚学完 jQuery 的新手,也能快上手。
如果你对这个动画感兴趣,或者在做一个轻量的动态列表,不妨先看下这个示例,再根据需求拓展下。哦对了,资源下面还有几个不错的相关文章,也挺值得一看:
如果你还在用 jQuery 做交互,或者只是想快速做个原型,这段代码真挺值一试的。加动画又不费事,用户体验还更顺滑了。
下载地址
用户评论