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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
javascript实现移动端红包雨页面
Jun 23 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
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
Python内置函数dir详解
2015/04/14 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
用Django写天气预报查询网站
2018/10/21 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
大学生心理活动总结
2014/07/04 职场文书
父亲节活动总结
2015/02/12 职场文书
消费者投诉书范文
2015/07/02 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Django实现聊天机器人
2021/05/31 Python