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 相关文章推荐
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
javascript折半查找详解
Jan 26 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
JavaScript实现4位随机验证码的生成
Jan 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
php批量删除操作代码分享
2017/02/26 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
快速了解Python中的装饰器
2018/01/11 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
技校毕业生自荐书
2014/05/23 职场文书
最美家庭活动方案
2014/08/31 职场文书
健康状况证明模板
2014/10/23 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
MySQL数据库 任意ip连接方法
2022/05/20 MySQL