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 相关文章推荐
JS重要知识点小结
Nov 06 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
浅谈document.write()输出样式
May 07 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
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调用MySQL的存储过程的实现代码
2008/08/12 PHP
php微信公众平台开发类实例
2015/04/01 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
PHP实现简易计算器功能
2020/08/28 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
jQuery动态添加
2016/04/07 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
详解如何用babel转换es6的class语法
2018/04/03 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
Python如何存储数据到json文件
2020/03/09 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
python各种excel写入方式的速度对比
2020/11/10 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
存储过程的优点有哪些
2012/09/27 面试题
艺术设计专业个人求职信范文
2013/12/11 职场文书
党员公开承诺书
2014/03/25 职场文书
四议两公开实施方案
2014/03/28 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang