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之去除s.gif的影响
Dec 25 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
js实现自定义滚动条的示例
Oct 27 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获取网址的顶级域名函数代码
2012/09/24 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
浅谈Python处理PDF的方法
2017/11/10 Python
Python Socket使用实例
2017/12/18 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
如何在Shell脚本中使用函数
2015/09/06 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
室内拓展活动方案
2014/02/13 职场文书
金融事务专业求职信
2014/04/25 职场文书
中学生运动会口号
2014/06/07 职场文书
竞赛口号大全
2014/06/16 职场文书
乱世佳人观后感
2015/06/08 职场文书
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技