jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)


Posted in Javascript onMay 08, 2013
    <head>
    <title></title>
    <style type="text/css">
    #img1
    {
        width:400px; height:500px;
        }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#Button1').bind('click', function () {
                $('img').fadeOut(2000, function () {
                    $('#Button1').val('哎,没了');      //图片的消逝
                });
            })
            $('#Button2').bind('click', function () {
                $('img').fadeIn(2000, function () {
                    $('#Button2').val('有了');      //图片的呈现
                });
            })
            $('#Button3').bind('click', function () {
                $('img').fadeTo(2000, 0.3, function () {
                    alert('画动执行终了');       //图片透明度
                });
            })
            $('#Select1').bind('change', function () { //可是以change或者是click事件
                $('img').fadeTo(1000, $('#Select1 option:selected').val());
            })
        })
    </script>
    </head>
    <body>
    <img src="images/1.jpg" id="img1" />
    <input id="Button1" type="button" value="button" />
    <input id="Button2" type="button" value="button" />
    <input id="Button3" type="button" value="button" />
    <select id="Select1">
        <option>1</option>
        <option>0.1</option>
        <option>0.2</option>
        <option>0.3</option>
        <option>0.4</option>
        <option>0.5</option>
        <option>0.6</option>
        <option>0.7</option>
        <option>0.8</option>
        <option>0.9</option>
        <option>0</option>
    </select>
    </body>
Javascript 相关文章推荐
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
JavaScript门道之标准库
May 26 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
jquery插件validate验证的小例子
May 08 #Javascript
jQuery ui插件的使用方法代码实例
May 08 #Javascript
js模拟select下拉菜单控件的代码
May 08 #Javascript
js工具方法弹出蒙版
May 08 #Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 #Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 #Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 #Javascript
You might like
PHP批量生成缩略图的代码
2008/07/19 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
php操作redis缓存方法分享
2015/06/03 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
PDO::rollBack讲解
2019/01/29 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
Django logging配置及使用详解
2019/07/23 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
卫校毕业生个人自我鉴定
2014/04/28 职场文书
个人授权委托书样本
2014/09/13 职场文书
大学生自荐材料范文
2014/12/30 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
HTML常用标签超详细整理
2022/03/19 HTML / CSS