jq-fadeIn&fadeOut:

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>toggle<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>fadein&fadeout</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>

		<script type="text/javascript">

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

//				$('#con').fadeOut();

				$('#con').fadeOut(3000);

			});

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

//				$('#con').fadeIn();

				$('#con').fadeIn(3000);

			})

		</script>

	</body>

</html>

</title>

	</head>

	<body>

	</body>

</html>

　　

jq-fadeIn&fadeOut的更多相关文章

  1. 原生js模仿jq fadeIn fadeOut效果 兼容IE低版本

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 移动表格行 解决低版本IE fadeIn fadeOut 失效问题

    在维护一个内部使用的web工具的时候,需要在表格里配置参数,并且支持参数列的上下移动,有jQuery-UI工具支持对表格列的拖动,但是此处不追求效果,而且旧系统页面兼容性很差,无奈只能做上下移动的按钮 ...

  3. jquery 中fadeIn,fadeOut动画

    我们在做首页banner图片播放的时候会使用fadeIn,fadeOut动画,这里需要注意的是: fadeIn作用相当于:display:list-item;opcity逐渐变为1 fadeOut作用 ...

  4. Zepto.js实现fadeIn,fadeOut功能

    Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. Zepto的设计目的是提供 jQuery 的 ...

  5. ‎Cocos2d-x 学习笔记(11.9) FadeTo FadeIn FadeOut

    1. 用处 FadeTo:由正常变透明,是另两个的父类,不支持reverse()方法.FadeIn:变完全不透明.FadeOut:变完全透明. 2. 使用 FadeTo: GLubyte _toOpa ...

  6. transitionend事件 监听 fadeIn fadeOut 两个方法无效（动画结束时无法执行transitionend里面的代码）

    //下面的例子证明 fadeIn() fadeOut() 不能使用transitionend事件进行监听. //说白了在fadeIn fadeOut 后面监听动画结束时,transitionend是不 ...

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

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

  8. 简单css动画 fadeIn fadeOut flash

    考虑兼容性采用 -webkit- -o- -mos- -ms- @keyframes fadeIn{ 0%{ opacity: 0; display: block; } 100%{ opacity: ...

  9. CSS 3 过渡效果之jquery 的fadeIn ,fadeOut

    .div { visibility: hidden; opacity: 0; transition: visibility 0s linear 0.5s,opacity 0.5s linear; } ...

  10. [Angular] FadeIn and FadeOut animation in Angular

    To define an Angular Animation, we using DSL type of language. Means we are going to define few anim ...

随机推荐

  1. UML学习笔记之类之间的关系

    1.    导航关系(Directed Association) A类有一个成员变量保存B的引用. 2.包含关系(Aggregation.Composition) (1)弱包含 含义:每个部门包含多个 ...

  2. 搜索技术---solr

    solr 企业站内搜索技术选型 在一些大型门户网站.电子商务网站等都需要站内搜索功能,使用传统的数据库查询方式实现搜索无法满足一些高级的搜索需求,比如:搜索速度要快.搜索结果按相关度排序.搜索内容格式 ...

  3. 用cv::Scalar来设置opencv中图片的颜色

    1 怎样使用cv::Scalar来设置opencv中的颜色 cv::Scalar的构造函数是cv::Scalar(v1, v2, v3, v4),前面的三个参数是依次设置BGR的,和RGB相反,第四个 ...

  4. 受够了if (ModelState.IsValid)？ActionFitlter也是一路的坑啊！

    这篇博客真是干货,干得估计还有点“磕牙”,所以还提供视频和代码.但基础稍弱的同学,怕还是得自行补充一些基础知识——就一篇文章,确实没办法面面俱到. 视频和代码下载:Demo - 百度云盘 · 一起帮 ...

  5. 4、Swing在JPanel中添加背景图片方法

    4.Jpanel面板中加载背景图片 在实际应用Java做界面的过程中,常常会涉及到加载背景图片以使页面美化.下面整理了一个小模块以便于调用. 1 package com.tntxia.commonsw ...

  6. 惊艳发现VS工具python项目Search Paths的应用

    之前,在没有发现VS工具python项目Search Paths的应用时,举个例子:假如项目的文件目录如下: maintest/maintest.py想要使用common/tools.py文件时,不得 ...

  7. java.util.Properties工具类

    import java.io.FileNotFoundException; import java.io.FileWriter; import java.io.IOException; import ...

  8. webpack 2.x 配置

    以下展示2.x 配置文件信息 v1 迁移至 v2 官方有更详细的说明 具体详见 https://webpack.js.org/guides/migrating/ 只列举常用到参数进行描述, 或者我在使 ...

  9. sqlserver使用job删除过期备份文件

    享下链接:http://blog.csdn.net/xieyufei/article/details/33770067(注意这里主要说明怎么设置删除过期备份文件) 先说下sqlserver使用job删 ...

  10. 网购的一套UI代码的始末

    引言: 一个商业项目的需要,又因为时间紧迫的关系,准备购买一套简洁,易用,可定制化强的UI,经过对国内外多家UI产品进行了对比, 包括:FineUI, EasyUI, EXT.NET, EXTJS, ...