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实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
详解javascript数组去重问题
Nov 06 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
理解jquery事件冒泡
Jan 03 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
javascript读取本地文件和目录方法详解
Aug 06 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_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Python 自由定制表格的实现示例
2020/03/20 Python
什么是Python中的顺序表
2020/06/02 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
口头翻译求职人自荐信
2013/12/07 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
小学语文业务学习材料
2014/06/02 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
工作简历的自我评价
2019/05/16 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python