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 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
javascript实现五星评分功能
Nov 10 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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
WordPress判断用户是否登录的代码
2011/03/17 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
酒店应聘自荐信
2013/11/09 职场文书
实习生自荐信范文分享
2013/11/27 职场文书
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
网管求职信
2014/03/03 职场文书
护士求职自荐信范文
2014/03/19 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
学校社会实践活动总结
2014/07/03 职场文书
毕业证代领委托书
2014/09/26 职场文书
2014年工程工作总结
2014/11/25 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫