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 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
elementui实现预览图片组件二次封装
Dec 29 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基础知识:类与对象(5) static
2006/12/13 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
JS实现页面打印功能
2017/03/16 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python函数参数类型*、**的区别
2015/04/11 Python
python黑魔法之参数传递
2016/02/12 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
python标准库OS模块详解
2020/03/10 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
财务会计专业个人求职信范本
2014/01/08 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
避暑山庄导游词
2015/02/04 职场文书
工作推荐信模板
2015/03/25 职场文书
交通事故责任认定书
2015/08/06 职场文书