jQuery的slideToggle方法实例


Posted in Javascript onMay 07, 2013
  <title></title>
    <style type="text/css">
    .imgclass{ width:300px; height:300px; border:solid 1px red;}
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#Button1').bind('click', function () {
                $('img').slideUp(2000);
            })
            $('#Button2').bind('click', function () {
                $('img').slideDown(2000);
            })
            $('#Button3').bind('click', function () {
                $('img').slideToggle(2000);
            })
        })
    </script>
</head>
<body>
<div>
<div>
    <input id="Button1" type="button" value="上拉" /><input id="Button2" type="button" value="下拉" /><input id="Button3" type="button" value="自动上拉下拉" /></div>
    <div><img src="images/1.jpg" class="imgclass"/></div>
</div>
</body>
Javascript 相关文章推荐
javascript倒计时功能实现代码
Jun 07 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
js只执行1次的函数示例
Jul 20 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
jQuery实现动画效果的实例代码
May 07 #Javascript
nullJavascript中创建对象的五种方法实例
May 07 #Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 #Javascript
javascript中的startWith和endWith的几种实现方法
May 07 #Javascript
js 获取和设置css3 属性值的实现方法
May 06 #Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 #Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 #Javascript
You might like
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
JS Array对象入门分析
2008/10/30 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
js转html实体的方法
2016/09/27 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
python实现杨辉三角思路
2017/07/14 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
2014年元旦感言
2014/03/06 职场文书
信息员培训方案
2014/06/12 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
2014年法院工作总结
2014/11/24 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
离婚上诉状范文
2015/05/23 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript