<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>效果</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>

    <style type="text/css">

    	body{

    		font-family: "Microsoft YaHei";

    		text-align: center;

    	}

    	#mainDiv {

    		width: 100%;

    		text-align: center;

    		margin-top:10px;

    	}

    	.div1 {

    		width:320px;

    		height:120px;

    		color: white;

    		background-color: #0092E7;

    		margin-left: auto;

    		margin-right: auto;

    	}

    	.div2 {

    		width:320px;

    		height:120px;

    		margin-top:10px;

    		margin-left: auto;

    		margin-right: auto;

    	}

    	.div2_1 {

    		width:155px;

    		height:100%;

    		color: white;

    		float: left;

    		text-align: center;

    	}

    	.cGreen{background-color: #4CA902}

    	.cPink{background-color: #ED4A9F}

    	.cBlue{background-color: #0092E7}

    	.cCyan{background-color: #01A6A2}

    	.cYellow{background-color: #DCA112}

    	.cRed{background-color: #B7103B}

    	.cPurple{background-color: #792F7C}

    	.cBlack{background-color: #110F10}

    	.cOrange{background-color: #FF4500}

    	.cGray{background-color: #A9A9A9}

    	.hide{display: none;}

    </style>

    <script type="text/javascript">

    	$(document).ready(function(){

    		$("#btn1").click(function(){

    			$(".div1").hide();

    		});

    		$("#btn2").click(function(){

    			$(".div1").show();

    		});

    		$("#btn3").click(function(){

    			$(".cPink").slideUp("slow");

    		});

    		$("#btn4").click(function(){

    			$(".cPink").slideDown(600);

    		});

    		$("#btn5").click(function(){

    			$(".cPink").slideToggle("slow");

    		});

    		$("#btn6").click(function(){

    			$(".cGreen").fadeOut("slow");

    		});

    		$("#btn7").click(function(){

    			$(".cGreen").fadeIn(600);

    		});

    		$("#btn8").click(function(){

    			$(".cGreen").fadeToggle("slow");

    		});

    		$("#btn9").click(function(){

    			$(".div1").fadeTo("slow", 0.4);

    		});

    		$("#btn10").click(function(){

    			$(".div2_1").animate({

    				   width: 'toggle', opacity: 'toggle'

    				 }, "slow");

    		});

    	});

    </script>

  </head>

  <body>

    <div id="mainDiv">

    	<div class="div1">①</div>

    	<div class="div2">

    		<div class="div2_1 cPink" style="margin-right:5px;">②</div>

    		<div class="div2_1 cGreen" style="margin-left:5px;">③</div>

    	</div>

   	</div>

    <p style="clear:both;"></p>

    <br>

    <hr>

    <input type="button" id="btn1" value="hide()隐藏蓝色区域块">

    <input type="button" id="btn2" value="show()隐藏蓝色区域块">

    <input type="button" id="btn3" value="slideUp()通过高度变化（向上减小）来动态地隐藏粉色区域块">

    <input type="button" id="btn4" value="slideDown()通过高度变化（向下增大）来动态地显示粉色区域块">

    <input type="button" id="btn5" value="slideToggle()通过高度变化来切换粉色区域块的可见性">

    <input type="button" id="btn6" value="fadeOut()通过不透明度的变化来实现淡出绿色块">

    <input type="button" id="btn7" value="fadeIn()通过不透明度的变化来实现淡入绿色块">

    <input type="button" id="btn8" value="fadeToggle()通过不透明度的变化淡入和淡出绿色块">

    <input type="button" id="btn9" value="fadeTo()通过不透明度以渐进方式调整蓝色块到指定的不透明度（0.4）">

    <input type="button" id="btn10" value="animate()通过制定自定义动画操作粉、绿色块">

  </body>

</html>

jQuery中的效果（九）：hide()、show()、slideUp()、slideDown()、slideToggle()、fadeOut()、fadeIn()、fadeTo()、animate等的更多相关文章

  1. jQuery中的效果函数方法整理

    注:以下所有的speed 参数可选,规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 以下所有的callback 参数可选,是效果完成后所执 ...

  2. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  3. 前端基础-jQuery的动画效果

    阅读目录 隐藏 显示 切换 下拉 上卷 显示 一.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局, ...

  4. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  5. 4.2 《锋利的jQuery》jQuery中的动画

    问题:queue()方法? tip0: jquery从1.9版本以上就不支持toggle()方法. // $("#panel h5.head").toggle(function() ...

  6. jQuery中事件与动画

    jQuery中的事件与动画   一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...

  7. jQuery中的事件与动画 笔记整理

    一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.window事件.表单事件.事件的绑定和处 ...

  8. 使用jQuery快速高效制作网页交互特效----jQuery中的事件与动画

    jQuery中的事件 和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现. 事件在元素对象与功能代码中起着重要的桥梁作用. 在JQuery中,事件 ...

  9. jQuery 中的简单动画

    制作动画常用方法: show("速度")   显示元素   hide("速度")   隐藏元素   toggle()       切换效果 例如下jQuery代 ...

随机推荐

  1. python + mysql 实现表更新数据

    实例如下: import pymysqldef Update_Set(): #打开数据库链接 db = pymysql.connect("localhost","root ...

  2. python的代码块和if条件表达式

    代码块和if条件表达式 代码块 什么是代码块 以冒号作为开始,用缩进来划分作用域. 在之后的学习当中,使用if条件语句.for.while循环语句.定义函数.定义类等诸多地方都会涵盖代码的概念. 什么 ...

  3. VUP虚拟直播与光学动作捕捉技术

    虚拟直播将虚拟场景.虚拟形象实时显示在观众面前,虚拟场景与人物替代了原有的耗费较大搭建成本的实景场景与真人出镜,为观众带来全新的视觉体验,同时新技术降低了原有场景搭建成本,是近些年继AI.VR.动作捕 ...

  4. 初识Stream API + Lambda表达式

    使用新特性简化代码,增强可读性 package com.gg.java8; import java.util.*; import org.junit.Test; public class TestLa ...

  5. C语言学习之基本数据类型【一】

    近期学习鸿蒙硬件物联网开发,用到的开发语言是C: 一.基础语法:第一个案例: 命令 gcc hello.c #include <stdio.h> //stdio.h 是一个头文件 , #i ...

  6. protobuf基础类以及python 转换pb2.py文件

    一 protobuf-前端解析js 前端解析思路: 1.问后端要数据模型文件,比如名为MODEL.proto 2.使用谷歌官方的工具生成MODEL.js 3.把项目中引用的MODEL.js 和谷歌官方 ...

  7. jstack 命令使用经验总结

    jstack 命令的基本使用 jstack 在命令使用上十分简洁, 其信息量与复杂度主要体如今 thread dump 内容的分析上;web # 最基本的使用sudo -u xxx jstack {v ...

  8. 大数据开发-Go-数组，切片

    new()和make的区别 二者看起来没什么区别,但是他们的行为不同,分别适用于不同的类型 new (T) 为每个新的类型 T 分配一片内存,初始化为 0 并且返回类型为 * T 的内存地址:这种方法 ...

  9. 那些 Unix 命令替代品们「GitHub 热点速览 v.21.32」

    作者:HelloGitHub-小鱼干 好用的 Unix 命令替代工具能让你事半功倍,例如,bat 便是个带着高亮特性的加强版 cat,就像你用了 oh my zsh 之后便会感受到它的强大.同样好用的 ...

  10. tomcat及springboot实现Filter、Servlet、Listener

    tomcat实现: 核心类org.apache.catalina.startup.ContextConfig //支持注解 see:org.apache.catalina.deploy.WebXml ...