<!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. sp_helptext输出错行问题解决

    相信,大家对sp_helptext存储过程一定不陌生,它可以帮你快速获取存储过程等对象的定义.但它有一个致命的缺点就是:每行最多返回255个nvarchar类型的字符,假如有一个编写不规范的存储过程, ...

  2. IO--性能计数器

    --===================================================================== --在分析磁盘队列时,应参考数据库的其他计数器,如Che ...

  3. C#文件和目录的操作

    根据文件名获取文件 /// <summary> /// 根据文件名获取文件 /// </summary> /// <param name="directory& ...

  4. .net core i上 K8S(二)运行简单.netcore程序

    上一章我们搭建了k8s集群,这一章我们开始在k8s集群上运行.netcore程序 1.kubectl run 在我的Docker系列教程里,我曾往docker hub中推送过一个镜像“webdokce ...

  5. ItemContainerStyleSelector

    ItemContainerStyleSelector是容器Style选择器 用法和ItemTemplateSelector差不多 同样也是也是继承类 StyleSelector,也是重写方法Selec ...

  6. VMware Workstation内存不足问题的解决！

    我今天使用VMware Workstation,遇到内存使用不足的问题,我使用的VMware Workstation是9,刚开始我以为是我的VMware Workstation版本低,所以上网找到了V ...

  7. “全栈2019”Java第六十一章：如何实现接口？

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  8. 利用Crawlspider爬取腾讯招聘数据(全站，深度)

    需求: 使用crawlSpider(全站)进行数据爬取 - 首页: 岗位名称,岗位类别 - 详情页:岗位职责 - 持久化存储 代码: 爬虫文件: from scrapy.linkextractors ...

  9. 如何在Linux下禁用IPv6

    如何在Linux下禁用IPv6 echo 1 > /proc/sys/net/ipv6/conf/all/disable_ipv6                            禁用IP ...

  10. TCP的超时与重传

    一.引言 对于每个TCP连接,TCP管理4个不同的定时器 重传定时器用于当希望收到另一端的确认. 坚持 (persist) 定时器使窗口大小信息保持不断流动,即使另一端关闭了其接收窗口. 保活 (ke ...