今天在研究jQuery,发现其hide()方法可以做出很好看的动画效果,与大家分享一下。效果如下,当我们点击下面的方框是,方框会缓慢消失。
直接上代码:
- 创建名为index.xml的文件,什么都不需要写,只需引入相应css,js文件,代码如下:
<span style="background-color: rgb(255, 255, 204);"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用hide()实现div隐藏动画</title> <script type="text/javascript" src="jquery-3.0.0.min.js"></script> <script src="index.js"></script> <link type="text/css" rel="stylesheet" href="index.css" > </head> <body> </body> </html></span>
- 创建名为index.js的文件,通过for循环,向html的body中append进去五个div,然后通过hide方法隐藏并指定动画时间,通过remove进行移除,代码如下:
/** * Created by Administrator on 2016/7/4. */ $(document).ready(function () { for(var i=0;i<5;i++){ $("<div>").appendTo(document.body); } $("div").click(function () { $(this).hide(2000,function () { $(this).remove; }); }); });
- 创建名为index.css的文件,指定div的样式,代码如下:
通过上述代码,便可实现点击div隐藏动画,当然这是很简单的动画,但若结合其他方法也可实现更加绚丽的特效,欢迎大家集思广益。div{ background:#fca093; width:60px; height:60px; margin: 2px; float: left; }