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 相关文章推荐
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
js获取页面description的方法
2015/05/21 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
Element input树型下拉框的实现代码
2018/12/21 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
详解详解Python中writelines()方法的使用
2015/05/25 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
Python如何存储数据到json文件
2020/03/09 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
pandas求平均数和中位数的方法实例
2021/08/04 Python
MySQL空间数据存储及函数
2021/09/25 MySQL
Pandas 数据编码的十种方法
2022/04/20 Python
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android