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中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
基于JavaScript实现随机点名器
Feb 25 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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python3中rank函数的用法
2019/11/27 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
简述 Python 的类和对象
2020/08/21 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
美国知名生活购物网站:Goop
2017/11/03 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
餐饮管理自我介绍信
2014/01/15 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
招标授权委托书样本
2014/09/23 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
会计专业求职信范文
2015/03/19 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang