.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. 单条sql性能分析与优化

    性能分析 1. explain 查看sql执行计划,得出索引使用情况等信息 2. show profiling 查看sql所有执行步骤以及用时,使用步骤如下 1)开启性能剖析 mysql> se ...

  2. 把我的漫画浏览器后台程序迁移到GAE上了

    这两天看了一下Python和GAE相关资料,作为练手,把我以前写的Windows 8下看漫画的程序的后台解析算法迁移到了GAE上了. 之前由于没有后台服务器,很多东西在本地实现起来不是很方便,现在拿G ...

  3. Cocos2dx 粒子销毁问题

    Cocos2dx    粒子销毁问题 DionysosLai(906391500@qq.com) 2014-7-3 之前在调试粒子特效时,在粒子编辑器有个选项是用来调整粒子的生命时间,当粒子存在的时间 ...

  4. Solr In Action 中文版 第一章（三）

    3.1              为什么选用Solr? 在本节中.我们希望能够提供一些关键信息来帮助于你推断Solr是否是贵公司技术方案的正确选择.我们先从Solr吸引软件架构师的方面说起. 3.1  ...

  5. 损失函数(loss function)

    通常而言,损失函数由损失项(loss term)和正则项(regularization term)组成.发现一份不错的介绍资料: http://www.ics.uci.edu/~dramanan/te ...

  6. ~/.bash_profile介绍

    mac和linux终端一般用bash来进行解析.当bash在读完了整体环境变量的/etc/profile并借此调用其他配置文件后,接下来则是会读取用户自定义的个人配置文件.bash读取的文件总共有三种 ...

  7. spring in action 4 (学习笔记1)

    1.spring两个核心性质 DI(依赖注入) AOP(面向切面编程) 2.bean的生命周期

  8. StringBuilder.append()与String的"+"的效率PK

    如果String通过"+"来拼接,如果拼接的字符串是常量,则效率会非常高,因为会进行编译时优化,这个时候StringBuilder的append()是达不到的. 如果将String ...

  9. POJ 2388：Who&#39;s in the Middle

    Who's in the Middle Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 31015   Accepted: 1 ...

  10. js - 正斜杆网址转换

    2018-8-7(更新) let http = 'http://www.baidu.com/com/img/1.jpg'; let https = 'http:\\www.baidu.com\\com ...