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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
three.js如何实现3D动态文字效果
Mar 03 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将向Java靠拢
2006/10/09 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python中的函数用法入门教程
2014/09/02 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
python遍历小写英文字母的方法
2019/01/02 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
Python字符串及文本模式方法详解
2020/09/10 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
测绘工程系学生的自我评价
2013/11/30 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
整改通知书
2015/04/20 职场文书