jQuery中slidedown与slideup方法用法示例


Posted in Javascript onSeptember 16, 2016

这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnslideDown").click(function () {
        $("#message").slideDown(1000);
      });
      $("#btnslideUp").click(function () {
        $("#message").slideUp(1000);
      });
      //*****举例1
      //      $("#btnToggle").click(function () {
      //        $("#message").slideToggle(1000);
      //      });
      //*****举例2 动画函数都可以传递回调函数,即动画执行完毕后会执行这个函数
      $("#btnToggle").click(function () {
        $("#message").slideToggle(1000, function () {
          alert('我执行完毕了!');
        });
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnslideDown" type="button" value="展开div" />
    <input id="btnslideUp" type="button" value="收起div" />
    <input id="btnToggle" type="button" value="切换" />
  </div>
  <div id="message">
    mouseover、mouseenter的区别:div里套div。见备注。和事件冒泡有关系。<br /> 
    不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 <br />
    只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件(穿过子元素不会触发)
  </div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
jquery实现数字输入框
Feb 22 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
jQuery中show与hide方法用法示例
Sep 16 #Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 #Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 #Javascript
AngularJs 动态加载模块和依赖
Sep 15 #Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 #Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 #Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 #Javascript
You might like
php header()函数使用说明
2008/07/10 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
Python getopt模块处理命令行选项实例
2014/05/13 Python
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
认识深刻的检讨书
2014/02/16 职场文书
结婚喜宴主持词
2014/03/14 职场文书
写得不错的求职信范文
2014/07/11 职场文书
归元寺导游词
2015/02/06 职场文书
刑事申诉状范文
2015/05/20 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
Python绘制散乱的点构成的图的方法
2022/04/21 Python