jq与原生js实现收起展开效果

(jq需自己加载)

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>展开收起</title>

		<style>

			* {

				margin: 0;

				padding: 0;

			}

			button {

				font-size: 18px;

				padding: 0 19px;

			}

			#con {

				width: 500px;

				background: #ccc;

				color: red;

				font-size: 18px;

				overflow: hidden;

			}

		</style>

		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<button id="zk">展开</button>

		<button id="sq">收起</button>

		<div id="con">

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

			展开收起动画效果

		</div>

		<!--原生js的写法-->

		<!--<script type="text/javascript">

			var zk = document.getElementById('zk');

			var sq = document.getElementById('sq');

			var con = document.getElementById('con');

			var timer = null,

				timer2 = null,

				conHeight = con.clientHeight;

			sq.onclick = function() {

				var h = conHeight;

				clearInterval(timer);

				timer = setInterval(function(){

					h -= 2;

					if(h <= 0) {

						h = 0;

						clearInterval(timer);

					}

					con.style.height = h + 'px';

				},10);

			}

			zk.onclick = function() {

				var h = 0;

				clearInterval(timer2);

				timer2 = setInterval(function(){

					h += 2;

					if(h >= conHeight) {

						h = conHeight;

						clearInterval(timer2);

					}

					con.style.height = h + 'px';

				},10);

			}

		</script>-->

		<!--jq的写法-->

		<script type="text/javascript">

			$('#sq').click(function() {

				$('#con').slideUp(2000,'swing',function() {

					alert(111);

				});

			});

			$('#zk').click(function() {

				$('#con').slideDown();

			});

		</script>

	</body>

</html>

　　

jq与原生js实现收起展开效果的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  4. 导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法（vue、jq、原生js）

    一.vue如何实现? 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  6. 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

  7. jq 与原生js 方法互相转换

    最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.虽然jq很简单,但是也有兼容问题,js基础是很重要的,jq的成功当时是因为ie6.7.8.9.10.chrom ...

  8. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

  9. 侧边栏收起展开效果，onmouseover,onmouseout

    //方法一<!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. ionic2 使用 cordova 打包成安卓apk

    准备工作: 1.下载java sdk 配置好java 环境 2.下载android sdk 跟 android studio 并配置好环境 1.查看平台支持,添加android平台 首先命令提示符进入 ...

  2. 开涛spring3(3.2) - DI之循环依赖

    3.2.1  什么是循环依赖 循环依赖就是循环引用,就是两个或多个Bean相互之间的持有对方,比如CircleA引用CircleB,CircleB引用 CircleC,CircleC引用CircleA ...

  3. SSH实现无密码验证登录

    http://blog.csdn.net/houqd2012/article/details/8544517

  4. kairosdb + cassandra Setup

    安装cassandra 下载 cassandra cassandra download mirror wget http://mirror.bit.edu.cn/apache/cassandra/2. ...

  5. Linux Namespaces机制——实现

    转自:http://www.cnblogs.com/lisperl/archive/2012/05/03/2480573.html 由于Linux内核提供了PID,IPC,NS等多个Namespace ...

  6. 关于jQuery表单选择中prop和attr的区别。

    今天用jQuery学习表单这一章节的内容,再次遇到表单全选时,不能进行第二次全选的情况.反复查看测试仍然找不到是什么原因.后来在网上查到原来是jQuery1.6以后的版本用到的是prop.用attr的 ...

  7. 详解Linux进程(作业)的查看和杀死

    目录: 引入进程 进程 线程 PS命令 TOP命令 其他查看进程命令 进程的优先级 作业控制机制 kill命令 一.引入进程 1.内存划分为:用户空间和内核空间 1.在用户空间里运行的进程,就是用户进 ...

  8. R formulas in Spark and un-nesting data in SparklyR: Nice and handy!

    Intro In an earlier post I talked about Spark and sparklyR and did some experiments. At my work here ...

  9. 360你吃屎啊你，hao123,12345等等

    请看到这个文章的小伙伴将文章看完,看看我的感受是有多深,谢谢了 现在浏览器已经是人们经常用的东西,相信都有时不时就差度娘的习惯吧 也就是说每个人都有自己喜欢的主页 可电脑有时候就是遭不住,360什么的 ...

  10. VR全景，零售业冬天里的一把火——全景智慧城市

    对今天的中国来说,寻找经济转型的突破口,寻找经济权力的新霸主,零售业应该当仁不让. 零售业正在经历一场脱胎换骨的改造.一方面零售额达到前所未有的水平,另一方面,传统零售商也面临诸多挑战,其中之一,便是 ...