<!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. 第一个.NET Core应用，创建.NET Core命令

    打开cmd,依次输入mkdir .project(创建目录),cd .\.project(进入目录),dotnet new(新建初始项目),dotnet restore(还原依赖),dotnet ru ...

  2. 【题解】 UVa11729 Commando War

    题目大意 你有n个部下,每个部下需要完成一项任务.第i个部下需要你花Bj分钟交代任务,然后他就会立刻独立地.无间断地执行Ji分钟后完成任务.你需要选择交代任务的顺序,使得所有任务尽早执行完毕(即最后一 ...

  3. powshel 控制目录文件权限

    for($file=[IO.File]::OpenText("C:\Users\Administrator\Desktop\user_list.txt") ; !($file.En ...

  4. “全栈2019”Java第四十四章：继承

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

  5. 为什么 SQLite 用 C 编写？

    简评:SQLite 官方出品. C是最好的选择 从 2000 年 5 月 29 日开始,SQLite 就选择了 C 语言.直到今天,C 也是实现 SQLite 这样软件库的最佳语言. C语言是实现 S ...

  6. linux设置ip别名

    修改文件 # vi /etc/hosts 添加地址和别名 192.168.222.126 s1 ##前面是机器ip,后面是别名 测试 [root@bogon /]# ping s1 PING s1 ( ...

  7. 浅谈Ionic2

    http://www.cnblogs.com/zhouming-web/p/6226323.html 前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScrip ...

  8. animal与@keyframe

    .test1 { width: 90px; height: 60px; -webkit-animation-name: skyset; -webkit-animation-duration: 2000 ...

  9. JavaWeb学习笔记（十六）—— 事务

    一.事务概述 1.1 什么是事务 银行转账!张三转10000块到李四的账户,这其实需要两条SQL语句: 给张三的账户减去10000元: 给李四的账户加上10000元. 如果在第一条SQL语句执行成功后 ...

  10. java8特性之Lambda表达式

    1.典型的用Lambda表达式的场景 如果有这样的一个小应用,其中的一个类Student包含姓名(name),性别(sex),分数(score),如下: package demo; public cl ...