<!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. 如何轻松学习C语言编程！

    C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...

  2. “全栈2019”Java第二十七章：流程控制语句中循环语句for

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

  3. luoguP4568 [JLOI2011]飞行路线

    https://www.luogu.org/problemnew/show/P4568 题目中 k 的大小只有 10,我们可以考虑建立分层图跑最短路 相同层中 a -> b 的权值仍为 val, ...

  4. 二，php的错误处理

    php处理错误的三种方式: 简单的die()语句: 自定义错误和错误触发器:错误日志: 1,简单的die()语句 if(!file_exists("aaa.txt")){ die( ...

  5. WordPress翻译更新失败解决方法

    编辑php的配置文件:php.ini,搜索并找到disable_functions: 删除disable_functions后面的scandir字符串,保存php.ini: 重载或重启php-fpm服 ...

  6. 树莓派 Raspbian

    备注,从右往左分别是:无线鼠标一个, HDMI转VGA接口一个,网线一根,小米充电宝电源线一个.树莓派Pi 3 一台,包括读卡器一个+32G class10 SD卡一块.最后俩个U盘作为备用里面有Ar ...

  7. The score of 'O' and 'X'

    题目描述 注意要点: 使用strlen函数注意加头文件#inlcude <cstring> 循环宏定义for循环#define _for(i,a,b) for(int i=(a);i< ...

  8. centos的基本命令02

    16:查看系统运行的进程 ps -ef 17:查看系统已开放的端口 netstat -tunlp 18:管道命令 ps -ef | grep tom # 查看系统中与tom相关的进程 19:grep过 ...

  9. CDQZ Day6

    1DP #2题目名称 种植 计数 棋盘 树输入文件名 plant.in count.in chess.in tree.in输出文件名 plant.out count.out chess.out tre ...

  10. js高级程序设计 笔记 --- 表单

    一,基础知识 在html中,表单是form元素,而在js中,表单对应的是HTMLFormElement类型,继承自HTMLElement,其独特的属性和方法有(常见): action:接收请求的URL ...