.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. 【Linux】linux命令大全

    [注意]:命令[compgen -b]可以列出所有当前系统支持的命令. 109个Linux命令 目录 1       文件管理... 5 1.1          basename. 5 1.2    ...

  2. 关于宏：container_of和 offsetof以及list_for_each_entry

    1.offsetof(TYPE, MEMBER) #define offsetof(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER) offse ...

  3. 2017.3.31 spring mvc教程（七）多视图控制器

    学习的博客:http://elf8848.iteye.com/blog/875830/ 我项目中所用的版本:4.2.0.博客的时间比较早,11年的,学习的是Spring3 MVC.不知道版本上有没有变 ...

  4. HTML5 Canvas 六角光阑动态效果

    光阑是光具组件中光学元件的边缘.框架或特别设置的带孔屏障,本人实现了结构比较简单的六角光阑,效果有点像宇航员在徐徐张开的飞船舷窗中看到逐渐完整的地球,下面四张图可以感受一下. 当然看动态效果才能真正体 ...

  5. HNU11376:Golf Bot

    Problem description Input The first line has one integer: N, the number of different distances the G ...

  6. 两种“新型”的javaweb后门(jspx和Java Logger)

    利用这个可以突破st2下   强制jsp跳转login.jsp 利用jspx解决jsp后缀被限制拿shell - Hack Blog | 黑客博客http://www.hackblog.cn/post ...

  7. 创建你的第一个ionic+cordova应用(1)

    前面我们安装了前端的神器webstorm11,体验到了强大的开发体验,接着我们来安装ionic 必备: Node.js (npm安装工具) 百度下载 官网下载  注:如果官网新版不能安装请用百度下载0 ...

  8. 正则表达式---A bytes of python

    正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑.   给定一个正则表达式和另一个 ...

  9. Archlinux: 优化触摸板配置

    在逛 Archlinuxcn BBS 时看到这个帖子: fcitx 输入法看不到选词,上面键盘也不见了! 等待妹子的 依云 提到了 infinality, 并且给出了这个链接: fix-infinal ...

  10. 记录：Android中StackOverflow的问题

    最近新作的项目上线,出现了一个让人抓狂的问题.在此记录一下! 现在的项目中,制作了一个界面非常复杂.整个结构是最外层一个Layout,封装了Menu键吊起的菜单,整个内容使用一个FrameLayout ...