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 私有成员分析
Jan 13 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 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中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
javascript屏蔽右键代码
2014/05/15 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
使用Python实现批量ping操作方法
2020/05/06 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
Python如何急速下载第三方库详解
2020/11/02 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
元旦晚会邀请函
2014/01/27 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python