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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 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新手上路(七)
2006/10/09 PHP
smarty实例教程
2006/11/19 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
js实现随机点名小功能
2017/08/17 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
基于python检查矩阵计算结果
2020/05/21 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
公司JAVA开发面试题
2015/04/02 面试题
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
历史系自荐信范文
2013/12/24 职场文书
经典公益广告词
2014/03/13 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
作弊检讨书范文
2015/05/06 职场文书
讲座新闻稿
2015/07/18 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
python lambda 表达式形式分析
2022/04/03 Python