<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.2.1.js"></script>

</head>

<body>

    <img src="22.jpg" style="display: none">

    <div>

        <input id="show" type="button" value="出现美女">

        <input id="hide" type="button" value="藏起美女">

        <input id="toggle" type="button" value="点击美女">

    </div>

<script>

    $("#show").click(function () {

        $("img").show(5000);

    })

    $("#hide").click(function () {

        $("img").hide(2000);

    })

    $("#toggle").click(function () {

        $("img").toggle(800);

    })

</script>

</body>

</html>

此代码中我们首先做了个img标签，放了一张美女图，并先设置display:none

随后设置了3个Input标签，并分别绑定了3个方法 

1，show（）此方法是将绑定的标签里的display：none改为dispaly:inline-block,随后从左上角起往右下角拉升放大，并且透明度由透明0逐渐恢复到1 ，并可以设置参数，1000为一秒钟完成展示整个过程

2，hide（）与上方法相反，display由inline-block改为none，并且收缩图像，透明度由1逐渐变成0.也是可以设置时间参数

3.toggle（）是上面2个方法的集合在一个键上，意思就是判断你的dispaly是什么属性，如果是none 就设置inline-block 如果非none就设置inline-block；

jQuery 的动画效果图片----隐藏打开方法的更多相关文章

  1. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  2. 第一百七十二节，jQuery，动画效果

    jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...

  3. jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

  4. jquery-12 jquery常用动画效果有哪些

    jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...

  5. ios学习--详解IPhone动画效果类型及实现方法

    详解IPhone动画效果类型及实现方法是本文要介绍的内容,主要介绍了iphone中动画的实现方法,不多说,我们一起来看内容. 实现iphone漂亮的动画效果主要有两种方法,一种是UIView层面的,一 ...

  6. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

    jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

  7. JQuery简单动画效果的发生顺序和animate方法

    (1)在同一组元素上的效果 当在一个.animate()方法中以多个属性的方式应用时,是同时发生的. 当以方法连缀的形式应用时,是按顺序发生的(排队效果)---除非queue选项值为false. (2 ...

  8. jQuery的动画效果

    jQuery 是一个 JavaScript 库.jQuery 库可以通过一行简单的标记被添加到网页中. <script type="text/javascript" src= ...

  9. jQuery之动画效果

    1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow"," ...

随机推荐

  1. RabbitMQ.Bus

    一个.netcore下的,十分简单的rabbitmq封装,基于RabbitMQ.Client Nuget https://www.nuget.org/packages/RabbitMQ.Bus/ ht ...

  2. solr入门教程-较详细

    Solr调研总结 开发类型 全文检索相关开发 Solr版本 4.2 文件内容 本文介绍solr的功能使用及相关注意事项;主要包括以下内容:环境搭建及调试;两个核心配置文件介绍;维护索引;查询索引,和在 ...

  3. 如何构建debian包

        1)安装dh_make如下: sudo apt-get intasll aptitude sudo aptitude install dh_make    2)以jsoncpp为例,说明如何生 ...

  4. kali linux之Bdfproxy

    Bdfproxy(mitmproxy) 基于流量劫持动态注入shellcode(arp欺骗,dns欺骗,流氓ap) 步骤: 开启流量转发---------sysctl -w net.ipv4.ip_f ...

  5. [BZOJ5212][ZJOI2018]历史

    传送门(洛谷) 人生第一道九条可怜……神仙操作…… 看着题解理解了一个早上才勉强看懂怎么回事…… 简化一下题目就是:已知每一个点access的总次数,求一个顺序使虚实边转化的次数最多 考虑一下,对于x ...

  6. 【线程】结果缓存实现（future与concurrenthashmap）

    Computable<A,V>接口中生命了一个函数Computable,其输入类型为A,输出类型为V,在ExpensiveFunction中实现的Computable,需要很长时间来计算结 ...

  7. CentOS 安装系统侦察工具

    Nessus setup: rpm -ivh http://downloads.nessus.org/nessus3dl.php\?file\=Nessus-6.10.2-es6.x86_64.rpm ...

  8. (转)windows下VMware-workstation中安装CentOS

    windows下VMware-workstation中安装CentOS   windows下VMware-workstation中安装CentOS,可以分两部分,安装虚拟机和安装CentOS虚拟机.具 ...

  9. svn 冲突Skipped ‘inm/inm/templates‘ -- Node remains in conflict

    svn在删除后,提交,更新操作后可能会报, svn update inm/inm -r 1586 Updating ‘inm/inm‘: Password: Skipped ‘inm/inm/temp ...

  10. editplus 编辑 php双击选中变量问题

    windows下,在很多地方双击鼠标左键可以选中一个连续的英文字符串. 在editplus 编辑器里可以双击选中一个变量,方便了编程,但是使用phptools(php.stx)增强语法插件后,在一个变 ...