jQuery使用slideUp方法实现控制元素缓慢收起


Posted in Javascript onMarch 27, 2015

本文实例讲述了jQuery使用slideUp方法实现控制元素缓慢收起功能的技巧。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideUp("slow");
 });
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide up panel</div>
<div id="panel">Hello world!</div>
</body>
</html>

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

Javascript 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
jQuery返回定位插件详解
May 15 jQuery
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 #Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 #Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 #Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 #Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 #Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 #Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 #Javascript
You might like
资料注册后发信小技巧
2006/10/09 PHP
php foreach、while性能比较
2009/10/15 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
jquery 插件学习(二)
2012/08/06 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
django数据库自动重连的方法实例
2019/07/21 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
init进程的作用
2015/08/20 面试题
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
父亲节活动策划方案
2014/08/24 职场文书
小学生作文评语集锦
2014/12/25 职场文书
律师函格式范本
2015/05/27 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书