JQuery中hide()和show()如何使用-创新互联

小编给大家分享一下JQuery中hide()和show()如何使用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

公司专注于为企业提供成都网站建设、网站设计、微信公众号开发、商城网站建设，小程序开发，软件按需求定制制作等一站式互联网企业服务。凭借多年丰富的经验，我们会仔细了解各客户的需求而做出多方面的分析、设计、整合，为客户设计出具风格及创意性的商业解决方案，成都创新互联更提供一系列网站制作和网站推广的服务。

hide()和show()方法，可以设置动画效果，本文对这两种方法效果加以说明。

hide(参数1，参数2)：

参数1：时间，单位为毫秒，表示对象隐藏所用的时间

参数2：回调函数，该函数在对象隐藏后触发。

show(参数1，参数2)：

参数1：同上

参数2：同上

示例：

JQuery中hide()和show()如何使用

需求说明：点击一个图片，该图片缓缓隐藏，隐藏后从页面删除，后一张图片补充前一张图片的位置

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        img{
            width: 100px;
            height: 80px;
        }
        
        #pics div{
            float: left;
            margin: 2px;
            width: 100px;
            height: 80px;
        }
    </style>
    <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function(){
            //获取所有的图片,并注册点击事件
            $("#pics>div").click(function(){
                $(this).hide(800,function(){
//回调函数，清除当前点击的元素
                    $(this).remove();//方法移除当前调用这个方法的元素---自杀
                });
            });
        });
    </script>
</head>
<body>
    <div id="pics">
        <div><img src="images/01.jpg" ></div>
        <div><img src="images/02.jpg" ></div>
        <div><img src="images/03.jpg" ></div>
        <div><img src="images/04.jpg" ></div>
        <div><img src="images/05.jpg" ></div>
    </div>
</body>
</html>

备注：

$(this).remove();//方法移除当前调用这个方法的元素---自杀

以上是JQuery中hide()和show()如何使用的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站制作公司行业资讯频道！

网站标题：JQuery中hide()和show()如何使用-创新互联
网站路径：https://www.cdcxhl.com/article48/djjhep.html

成都网站建设公司_创新互联，为您提供商城网站、网站改版、微信公众号、网站导航、网站设计公司、标签优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容