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树形控件脚本代码
Jul 24 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
js实现每日签到功能
Nov 29 Javascript
elementUI select组件使用及注意事项详解
May 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中防止SQL注入最好的方法是什么
2013/06/10 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
浅谈python对象数据的读写权限
2016/09/12 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python猜数字算法题详解
2020/03/01 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
python实现文法左递归的消除方法
2020/05/22 Python
Python读写锁实现实现代码解析
2020/11/28 Python
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
优秀导游先进事迹材料
2014/01/25 职场文书
厨房管理计划书
2014/04/27 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
大学生入党群众意见书
2015/06/02 职场文书
四大名著读书笔记
2015/06/25 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
python之基数排序的实现
2021/07/26 Python