<!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. 解决 centos 7 部署 tomcat 后外部不能访问应用（端口、防火墙）

    https://blog.csdn.net/Rebs_Hugo/article/details/85042602

  2. 解决SqlServer 2005 sa帐户不能登录问题

    允许 sa 用户远程是很危险的.推荐的做法是在本地新建一个允许远程连接的用户. 1.启用TCP/IP协议. 2.配置监听端口(1433). net -an 检查本地端口是否建立监听,使用 在线IP端口 ...

  3. C#连接SQL server数据库

    C#连接SQL server数据库 创建一个Windows应用程序,在窗体中添加TextBox控件.Button控件.Label控件. private void button1_Click(objec ...

  4. Spring各个jar包详解

    Spring各jar包详解 spring.jar 是包含有完整发布模块的单个jar 包.但是不包括mock.jar,aspects.jar, spring-portlet.jar, and sprin ...

  5. python中readline判断文件读取结束的方法

    注:内容来自网络 本文实例讲述了python中readline判断文件读取结束的方法.分享给大家供大家参考.具体分析如下: 大家知道,python中按行读取文件可以使用readline函数,下面现介绍 ...

  6. 201621123012《Java程序设计》第13次学习总结

    作业 - 13 网络 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系 ...

  7. [ActionScript 3.0] 常用的正则表达式

    as 3.0常用的正则表达式: /* * 去除字符串前面的空格和跳格符 */ var src:String=" Hello! "; trace(src); //原文本 trace( ...

  8. linux awk 文本分析实例 [视频]

    实例: 点我打开哔哩哔哩 实战: 点我打开哔哩哔哩 以下是一个分享: ➜ log Time Now 16:23:35 > awk '/Installed/' yum.log* | awk -F ...

  9. MIT 黑科技：通过脑电波和手势控制机器人

    简评:麻省理工黑科技,虽然现在能实现的操作还很简单,但前景(想象空间)非常巨大. 通常,控制机器人并不容易,常规手段就是编程.但是地球上从来不缺天马行空的科学家,今日 MIT 的计算机科学与人工智能实 ...

  10. Windows下Jmeter安装出现Not able to find Java executable or version问题解决方案

    安装好java1.8.jmeter4.0,并java -version正常,jmeter也能正常使用.某一次使用突然出现Not able to find Java executable or vers ...