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 相关文章推荐
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
再探JavaScript作用域
Sep 24 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
JS函数式编程实现XDM一
Jun 16 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
第八节 访问方式 [8]
2006/10/09 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
在Python中使用模块的教程
2015/04/27 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
python代码实现ID3决策树算法
2017/12/20 Python
python 编码规范整理
2018/05/05 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
Python request使用方法及问题总结
2020/04/26 Python
python属于软件吗
2020/06/18 Python
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
电子商务毕业生求职信
2013/11/10 职场文书
医院信息公开实施方案
2014/05/09 职场文书
python 模块重载的五种方法
2021/04/24 Python