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 相关文章推荐
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
js中小数转换整数的方法
Jan 26 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 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查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
php命令行用法入门实例教程
2014/10/27 PHP
php设计模式之委托模式
2016/02/13 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
用Python中的字典来处理索引统计的方法
2015/05/05 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
Python引用计数操作示例
2018/08/23 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
Servlet如何得到服务器的信息
2015/12/22 面试题
建筑行业的大学生自我评价
2013/12/08 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
如何撰写岗位职责
2014/02/01 职场文书
法人授权委托书范本
2014/09/17 职场文书
2014年消防工作总结
2014/11/21 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS