编程 Javascript

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 相关文章推荐

6款新颖的jQuery和CSS3进度条插件推荐

Mar 05 Javascript

文本域光标操作的jQuery扩展分享

Mar 10 Javascript

一个JavaScript处理textarea中的字符成每一行实例

Sep 22 Javascript

JavaScript使用ActiveXObject访问Access和SQL Server数据库

Apr 02 Javascript

JS基于cookie实现来宾统计记录访客信息的方法

Aug 04 Javascript

谈谈我对JavaScript中typeof和instanceof的深入理解

Dec 25 Javascript

js实现多图左右切换功能

Aug 04 Javascript

基于Vue2x的图片预览插件的示例代码

May 14 Javascript

Express之托管静态文件的方法

Jun 01 Javascript

如何实现小程序tab栏下划线动画效果

May 18 Javascript

如何使用proxy实现一个简单完整的MVVM库的示例代码

Sep 17 Javascript

在Vue中使用mockjs代码实例

Nov 25 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