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 相关文章推荐
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
js读取配置文件自写
Feb 11 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
vue给对象动态添加属性和值的实例
Sep 09 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
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python如何实现转换URL详解
2019/07/02 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
python函数不定长参数使用方法解析
2019/12/14 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
《蓝色的树叶》教学反思
2014/02/24 职场文书
敬老院活动总结
2014/04/28 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
python process模块的使用简介
2021/05/14 Python