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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
javascript闭包入门示例
Apr 30 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
基于iview的router常用控制方式
May 30 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
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字符串 ==比较运算符的副作用
2009/10/21 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
iframe子父页面调用js函数示例
2013/11/07 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python 爬取微信文章
2016/01/30 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python调试神器PySnooper的使用
2019/07/03 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
什么是Rollback Segment
2013/04/22 面试题
软件测试英文面试题
2012/10/14 面试题
保安的辞职报告怎么写
2014/01/20 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
微笑服务演讲稿
2014/05/13 职场文书
离婚协议书格式
2014/11/21 职场文书
廉洁自律个人总结
2015/02/14 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers