.hide([duration][,complete])——目标元素的隐藏。

.show([duration][,complete])——目标元素的显示；

.toggle([duration][,complete])——当目标元素隐藏时则显示。否则隐藏。

注：可选參数[duration]为方法运行的时间区间；[,complete]为回调函数。

<!DOCTYPE html>

<html lang="zh_CN">

<head>

    <meta charset="UTF-8">

    <title>显示与隐藏</title>

    <script src="js/jquery-2.1.3.min.js"></script>

    <script src="js/my.js"></script>

    <style>

        div{

            background: #005599;

            width: 100px;

            height: 100px;

            margin: 5px;

            float: left;

        }

    </style>

</head>

<body>

<img src="images/g.jpg"/>

<button id="btn1">隐藏</button>

<button id="btn2">显示</button>

<button id="btn3">隐藏/显示</button>

</body>

</html>

my.js代码部分：

/*显示与隐藏*/

$(document).ready(function(){

    //隐藏

    $('#btn1').click(function(){

        //$('img').hide();

        $('img').hide(1000);

    });

    //显示

    $('#btn2').click(function(){

        //$('img').show();

        $('img').show(1000);

    });

    //切换显示与隐藏

    $('#btn3').click(function(){

        //$('img').toggle();

        $('img').toggle(1000);

    });

    //利用hide()制作一个效果

    for(var i=0;i<5;i++){

        $("<div>").appendTo(document.body);

    }

    $('div').click(function(){

        $(this).hide(2000,function(){

            $(this).remove();

        })

    })

})

jQuery效果之显示与隐藏的更多相关文章

  1. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  2. jQuery控制元素显示、隐藏、切换、滑动的方法

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...

  3. jquery里面控制显示和隐藏 ___土狗toggle

    $("#hide").click(function(){ $("p").hide(); }); $("#show").click(funct ...

  4. jquery渐渐的显示、隐藏效果

    <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...

  5. jQuery下的显示和隐藏

    因为太久没更新了,所以来放一点没意思的内容. 做的是jQuery框架的隐藏和显示,HTML如下: <ul> <li>1</li> <li>2</l ...

  6. jquery 判断元素显示或隐藏

    $().is(":hidden"); $().is(":visible");

  7. jquery点击显示或隐藏

    点击第一个dd,给第一li添加class,点击第二个dd,给第二个li添加class,以此类推 $(function(){     $("dd > a").click(fun ...

  8. vue类似tab切换的效果，显示和隐藏的判断。

    两者切换,动态显示对应的列表详情. 通过v-show的判断 数据驱动

  9. jQuery 效果 —— 隐藏和显示

    jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...

随机推荐

  1. 阿里云ECS在CentOS 6.9中使用Nginx提示：nginx: [emerg] socket() [::]:80 failed (97: Address family not supported by protocol)的解决方法

    说明: 1.[::]:80这个是IPv6的地址. 2.阿里云截至到今天还不支持IPv6. 解决方式: 1.普通解决方式:开启IPv6的支持,不过这个方法在阿里云行不通. vim /etc/nginx/ ...

  2. java随机打乱集合顺序

    public static void main(String[] args) { List <Integer> intList = new ArrayList<Integer> ...

  3. easyui 放大镜图标

    iconCls:search 对应的 easyui的查询图标忒丑 想用放大镜图标 iconCls:zoom 找半天找到放大镜图标的 然后去icon.css文件中查 发现这个样式就叫zoom.

  4. PS Tips: powershell 将文件以utf8格式打开并另存

    1. powershell 将文件以utf8格式打开并另存 Get-Content .\rep_position_liquidity.csv -Encoding UTF8 | Set-Content ...

  5. hdoj 1159最长公共子序列

     /*Common Subsequence A subsequence of a given sequence is the given sequence with some elements ( ...

  6. 一个人的安全部之ELK接收Paloalto日志并用钉钉告警

    起因 通报漏洞后,开发未能及时修复漏洞,导致被攻击,领导说我发现被攻击的时间晚了,由于一个人安全部精力有限未能及时看IPS告警,于是做了个钉钉告警. 本人环境介绍 ubuntu 14.04 pytho ...

  7. Tomcat：Java Web服务器配置详解

    一.Tomcat概述 1.tomcat简介 tomcat是基于JDK的web服务器,其能运行Servlet和JSP规范总.Tomcat 5支持最新的Servlet 2.4 和JSP 2.0规范.实际上 ...

  8. ASP.NET MVC学习---（三）EF简单增删改查

    那么现在我们已经大概从本质上了解了ef 巴拉巴拉说了一大堆之后 总算要进入ef的正题了 总在口头说也太不行了是吧~ 没错,现在要用ef进行一些实际的操作 做什么呢? 就做一个入门级的增删改查操作吧 废 ...

  9. Android 在同一个手机上安装多个同样的apk，便于调试

    Android studio 在同一个手机上安装多个同样的apk 原文地址:http://yj.itrydo.com/posts/iKJryXL9zkfSGRTZk 先看效果: 1.在我使用ecsli ...

  10. 最新iOS发布App Store详细图文教程~

    网上有很多关于iOS发布上架的教程,但大多比较旧而且不完整.不够清晰.所以整理了一个详细完整的iOS APP发布上架App Store的图文教程.分享给小白到大神路上前进的你我. 上架iOS需要一个苹 ...