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 相关文章推荐
使用正则替换变量
May 05 Javascript
Javascript this指针
Jul 30 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
Vue实现选择城市功能
May 27 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 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
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
laravel安装和配置教程
2014/10/29 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
python使用append合并两个数组的方法
2015/04/28 Python
Python中字典映射类型的学习教程
2015/08/20 Python
python生成excel的实例代码
2017/11/08 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
人力资源专员自我评价怎么写
2013/09/19 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
村党支部书记承诺书
2014/05/29 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle