jQuery中slideUp 和 slideDown 的点击事件


Posted in Javascript onFebruary 26, 2015

先贴代码,再讲详细事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/jquery.js"></script>

    </head>

    <style type="text/css"> 

        div.panel,p.flip

        {

        margin:0px;

        padding:5px;

        text-align:center;

        background:#e5eecc;

        border:solid 1px #c3c3c3;

        }

        div.panel

        {

        height:120px;

        }

    </style>

    <body>

        <div class="panel">

            <p>W3School - 领先的 Web 技术教程站点</p>

            <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>

        </div>

            <p class="flip">请点击这里</p>

        <script type="text/javascript">

            $(document).ready(function(){

                $(".flip").click(function(){

                    $(".panel").slideUp(300);

                });

            });

        </script>    

    </body>

</html>

重点(Tips):

1、click 事件 按钮的选择

   在这个断码中是  “.flip”

2、节点的选择

在这段代码中是 “.panel”

再贴一段代码

        <script type="text/javascript">

            $(document).ready(function(){

                $(".flip").click(function(){

                    $(".panel").slideToggle(300);

                });

            });

        </script>   

.slideToggle 事件

将这个滑动效果进行了  Up 和 Down 的2中效果 都展示出来

以上内容就是关于jQuery中slideUp 和 slideDown 的详细讲解了,希望大家能够喜欢。

Javascript 相关文章推荐
jquery提升性能最佳实践小结
Dec 06 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
使用js画图之画切线
Jan 12 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 #Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 #Javascript
使用jQuery获得内容以及内容的属性
Feb 26 #Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 #Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 #Javascript
2则自己编写的jQuery特效分享
Feb 26 #Javascript
javascript制作网页图片上实现下雨效果
Feb 26 #Javascript
You might like
php中用数组的方法设置cookies
2011/04/21 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
IE和Firefox下event事件杂谈
2009/12/18 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
DOM 高级编程
2015/05/06 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
Python实现快速多线程ping的方法
2015/07/15 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Python魔法方法详解
2019/02/13 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
航空大学应届生求职信
2013/11/10 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
python中filter,map,reduce的作用
2022/06/10 Python