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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
js检测用户输入密码强度
Oct 22 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
小程序实现分类页
Jul 12 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 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的access操作类
2008/04/09 PHP
php 中英文语言转换类
2011/09/07 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
python实现公司年会抽奖程序
2019/01/22 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
保安自我鉴定范文
2013/12/08 职场文书
教师年度考核评语
2014/04/28 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
会计简历自我评价
2015/03/10 职场文书
旅游投诉信范文
2015/07/02 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL