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 相关文章推荐
javascript 清除输入框中的数据
Apr 13 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
JS常用算法实现代码
Nov 14 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 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下连接mssql2005的代码
2011/01/17 PHP
php URL验证正则表达式
2011/07/19 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
python中常用检测字符串相关函数汇总
2015/04/15 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
python中删除某个元素的方法解析
2019/11/05 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
酒店秘书求职信范文
2014/02/17 职场文书
检查接待方案
2014/02/27 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
保护环境倡议书
2014/04/14 职场文书
个人投资计划书
2014/05/01 职场文书
相亲大会策划方案
2014/06/05 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
2014年学生会工作总结
2014/11/07 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers