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 20 Javascript
javascript定时器完整实例
Feb 10 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
js数据类型检测总结
Aug 05 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 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 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
简单了解django orm中介模型
2019/07/30 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
护理学专业推荐信
2013/12/03 职场文书
大学新闻系求职信
2014/06/03 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
个性与发展自我评价
2015/03/06 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
iPhone13再次曝光
2021/04/15 数码科技
react antd实现动态增减表单
2021/06/03 Javascript