使用jquery的hide方法实现div隐藏动画

最新推荐文章于 2024-03-02 10:43:29 发布

I_Am_Zou

最新推荐文章于 2024-03-02 10:43:29 发布

阅读量3.3k

点赞数 1

分类专栏： web 文章标签： css jquery 动画 javascript

本文链接：https://blog.csdn.net/i_am_zou/article/details/51818734

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天在研究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{
    background:#fca093;
    width:60px;
    height:60px;
    margin: 2px;
    float: left;
}
```
通过上述代码，便可实现点击div隐藏动画，当然这是很简单的动画，但若结合其他方法也可实现更加绚丽的特效，欢迎大家集思广益。

I_Am_Zou

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jquery的hide方法实现div隐藏动画

今天在研究jQuery，发现其hide（）方法可以做出很好看的动画效果，与大家分享一下。效果如下，当我们点击下面的方框是，方框会缓慢消失。直接上代码：创建名为index.xml的文件，什么都不需要写，只需引入相应css,js文件，代码如下：使用hide（）实现div隐藏动画创建名为index.js的文件，通过fo
复制链接

扫一扫