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和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
Vue实现todo应用的示例
Feb 20 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之Smarty入门
2007/01/04 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
js 分栏效果实现代码
2009/08/29 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
基于python实现微信模板消息
2015/12/21 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python查看列的唯一值方法
2018/07/17 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Django继承自带user表并重写的例子
2019/11/18 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python之语音识别speech模块
2020/09/09 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
Eclipse面试题
2014/03/22 面试题
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
工作检讨书范文
2015/01/23 职场文书
班主任班级管理心得体会
2016/01/07 职场文书