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 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
js+css实现全屏侧边栏
Jun 16 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
一个简单计数器的源代码
2006/10/09 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
改进Django中的表单的简单方法
2015/07/17 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
党校培训自我鉴定
2014/02/01 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
2014年外联部工作总结
2014/11/17 职场文书
先进班集体事迹材料
2014/12/25 职场文书
收入证明怎么写
2015/06/12 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript