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 相关文章推荐
菜鸟javascript基础整理1
Dec 06 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 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创建多级目录代码
2008/06/05 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
php自定义apk安装包实例
2014/10/20 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
php日期操作技巧小结
2016/06/25 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
Python3列表List入门知识附实例
2020/02/09 Python
python如何设置静态变量
2020/09/07 Python
python两种注释用法的示例
2020/10/09 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
ORACLE十问
2015/04/20 面试题
中国好声音华少广告词
2014/03/17 职场文书
购房协议书范本
2014/04/11 职场文书
妇女工作先进事迹
2014/08/17 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python