jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果
隐藏、显示、切换、滑动、淡入淡出、以及动画 1、隐藏与显示(改变：display：none;)
hide()——隐藏
show()——显示 toggle()方法：可以使用它来切换hide()与show()方法
eg1：显示
<style type="text/css">
*{margin:0;padding:0;}
.body{font-size:12px;font-family:"微软雅黑";color:#666;}
.yym{width:100px;height:100px;background:red;text-align:center;line-height:100px;border-radius:50px;color:#fff;display:none;}
</style>
</head>
<body>
<div class="yym">世界那么大</div>
<input type="button" value="点击显示HTML元素" id="show_btn" />
<input type="button" value="点击显示HTML元素并执行回调函数" id="show_btn1" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//点击按钮让class=yym的文本显示出来
$("#show_btn").click(function(){
//slow默认值==600毫秒，1秒=1000毫秒;fast==200毫秒
$(".yym").show("slow");
});
//用1000毫秒把.yym显示出来，并且将文本替换成新的内容
$("#show_btn1").click(function(){
$(".yym").show(1000,function(){
$(this).text("我想去看看");
});
});
});
</script>
eg2：隐藏
<body>
<p>黄河是中国的第二大河流</p>
<input type="button" value="点击隐藏文本" id="yym_hide"/>
<input type="button" value="点击缓慢隐藏文本" id="yym_hide1" />
<input type="button" value="缓慢隐藏文本并回调函数" id="yym_hide2" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//点击按钮隐藏P标签
$("#yym_hide").click(function(){
$("p").hide();
});
//点击按钮缓慢隐藏P标签
$("#yym_hide1").click(function(){
$("p").hide(2000);
});
//点击元素
$("#yym_hide2").click(function(){
//隐藏p标签，function（回调函数）
$("p").hide(1000,function(){
$("body").text("黄河之母亲河");//文本隐藏后，若要让文本改变，则用body
});
});
});
</script> eg3：toggle()——点击按钮隐藏，再点击又显示
<style type="text/css">
*{margin:0;padding:0;}
.yym{width:300px;height:300px;background:green;}
</style>
</head>
<body>
<div class="yym"></div>
<input type="button" value="toggle函数" id="yym_toggle" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//点击按钮隐藏，再点击又显示
$("#yym_toggle").click(function(){
});
});
</script> eg3.1:
<style type="text/css">
*{margin:0;padding:0;}
.yym{width:300px;height:300px;background:green;}
</style>
</head>
<body>
<div class="yym"></div>
<input type="button" value="toggle函数" id="yym_toggle" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//点击按钮隐藏，再点击又显示
$("#yym_toggle").click(function(){
$(".yym").toggle(2000,function(){
$("body").html("<img src='http://p1.qhimg.com/dmt/528_351_/t012ffcdd03db3d42f6.jpg' alt='美女' width='500' height='300'>")
});
});
});
</script> 2、淡入淡出(改变：宽度、高度、透明度<opacity>)
通过jQuery，可以实现元素的淡入淡出效果(改变opacity透明度)
jQuery拥有以下四种方法：
fadeIn()用于淡入已隐藏的元素
fadeOut()方法用于淡出可见元素
fadeToggle()该方法可以在fadeInt()与fadeOut()方法之间进行切换
如果元素已淡出，则fadeToggle()会向元素添加淡入效果
如果元素已淡入，则fadeToggle()会向元素添加淡出效果 jQuery fadeTo()方法
jQuery fadeTo()方法允许渐变为给定的不透明（值介于0与1之间）
eg:fadeIn()淡入元素 fadeOut淡出元素 fadeToggle()切换 fadeTo透明度
<style type="text/css">
*{margin:0;padding:0;}
.yym{width:300px;height:300px;background:red;display:none;}
</style>
</head>
<body>
<input type="button" value="我是一个fadeIn方法" id="yym_fadeIn">
<input type="button" value="我是一个fadeOut方法" id="yym_fadeOut">
<input type="button" value="fadeToggle方法" id="yym_fadeToggle" />
<input type="button" value="fadeTo透明度" id="yym_fadeTo" />
<div class="yym"></div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//fadeIn淡入
$("#yym_fadeIn").click(function(){
$(".yym").fadeIn(2000);
});
//fadeOut淡出
$("#yym_fadeOut").click(function(){
$(".yym").fadeOut(2000);
});
//fadeToggle 隐藏与显示的切换
$("#yym_fadeToggle").click(function(){
$(".yym").fadeToggle();
});
//fadeTo渐变为给定的不透明度（值介于0到1之间）
$("#yym_fadeTo").click(function(){
$(".yym").fadeTo(2000,0.5,function(){//表示2秒钟变成半透明度，所有例子中function都是可加可不加，加是另外改变什么
alert("太帅了");
});
});
});
</script>
</body> 3、滑动(改变：高度)
jQuery滑动方法可使元素上下滑动（主要是改变高度）
通过jQuery，可以在元素上创建滑动效果
jQuery有以下滑动方法：
slideDown()用于向下滑动元素
slideUp()用于向上滑动元素
slideToggle()方法可以在slideDown()和slideUp方法之间进行切换
如果元素向下滑动，则slideToggle()可向上滑动
如果元素向上滑动，则slideToggle()可向下滑动
eg：
<style type="text/css">
*{margin:0;padding:0;}
.yym{width:300px;height:300px;background:red;display:none}
</style>
</head>
<body>
<input type="button" value="向下滑动" id="yym_slideDown" />
<input type="button" value="向上滑动" id="yym_slideUp" />
<input type="button" value="上下滑动切换" id="yym_slideToggle" />
<div class="yym"></div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//slideDown向下滑动
$("#yym_slideDown").click(function(){
$(".yym").slideDown(2000);
});
//slideUp向上滑动
$("#yym_slideUp").click(function(){
$(".yym").slideUp(4000);
});
//slideToggle上下滑动切换
$("#yym_slideToggle").click(function(){
$(".yym").slideToggle(2000);
});
});
</script> 4、 1）动画
jQuery animate()方法允许创建自定义的动画
jQuery动画——animate()方法 jQuery animate()方法用于创建自定义动画 2）停止动画
jQuery stop()方法用于在动画或效果完成前对他们进行停止 jQuery stop()方法
jQuery stop()方法用于停止动画或效果，在他们完成之前
stop()方法适用于所有jQuery效果函数，淡入淡出和自定义动画 eg：
<style type="text/css">
*{margin:0;padding:0;}
.yym{width:300px;height:300px;background:red;position:absolute;left:0;top:30px;}
</style>
</head>
<body>
<input type="button" value="点击我放大" id="yym_animate" />
<input type="button" value="点击我停止" id="yym_stop" />
<div class="yym"></div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//使原背景图片动起来
$("#yym_animate").click(function(){
$(".yym").animate({
width:"500px",
height:"500px",
//移动时必须要position定位
left:"200px",//向右移动
top:"200px"//向下移动
},2000,function(){//不写时间也可以的
alert(0);
});
});
//使原本动起来的背景图片停下来
$("#yym_stop").click(function(){
$(".yym").stop();
});
});
</script>
</body>
jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画的更多相关文章
- JQuery效果隐藏/显示
hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 sp ...
- 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
- jQuery 效果 —— 隐藏和显示
jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...
- 【Android Developers Training】 69. 视图切换的淡入淡出效果
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画
/** * [JQ基础动画] * show() 显示 * hide() 隐藏 * toggle() 切换 * 默认无动画,如果要产生动画 * 在括号内,添加毫秒数,可产生动画和控制动画的快慢 * * ...
- JQuery动画之淡入淡出动画
1. 淡入动画 1.1 不带参数的淡入动画 格式: $(selector).fadeIn(); 示例代码: <!doctype html> <html lang="en&q ...
- [Android]异步加载图片，内存缓存，文件缓存，imageview显示图片时增加淡入淡出动画
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3574131.html 这个可以实现ImageView异步加载 ...
- Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- jQuery 效果 – 隐藏和显示
在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法. 隐藏.显示.切换,滑动 ...
随机推荐
- C# 枚举
一.在学习枚举之前,首先来听听枚举的优点. 1.枚举能够使代码更加清晰,它允许使用描述性的名称表示整数值. 2.枚举使代码更易于维护,有助于确保给变量指定合法的.期望的值. 3.枚举使代码更易输入. ...
- javascript基础学习（三）
javascript之运算符 学习要点: 表达式 运算符:一元运算符,算术运算符,关系运算符,逻辑运算符,*位运算符,赋值运算符 一.表达式 表达式有常量表达式,变量表达式,复合表达式. 二.算术运算 ...
- javascript基础学习（一）
javascript输出: javascript通过不同的方式来显示数据: (1)windows.alert()弹出警告框: (2)document.write()将方法写入HTML文档中: (3)i ...
- 静态方法块 static 以及对象属性&类属性的用法
使用静态块的好处:只要在类被加载时,static块就会被调用,整个过程就调用这么一次,不会在后面的对象处又不断的调用.如果不使用它,就会出现如下问题:new一个对象,我就要调用一次所需的这些内容,重复 ...
- Vijos1834 NOI2005 瑰丽华尔兹 动态规划 单调双端队列优化
设dp[t][x][y]表示处理完前t个时间段,钢琴停留在(x,y)处,最多可以走多少个格子 转移时只需逆着当前倾斜的方向统计len个格子(len为时间区间的长度,len=t-s+1),如果遇到障碍就 ...
- Android JIN返回结构体
一.对应类型符号 Java 类型 符号 boolean Z byte B char C short S int I long J float ...
- PHP-HTML重要知识点笔记
1.用frameset.frame和iframe还实现多窗口 2.在图片上利用映射距离usemap来实现按钮跳转.------第8尾集 3.表单必须要有name和value,因为抓包的时候,可发现必须 ...
- jQuery幻灯片skitter-slider插件学习总结
@(关键词)[skitter|jquery|网页幻灯片|slider] Skitter 是一个非常酷炫的jQuery网页幻灯片插件,支持非常多种酷炫幻灯片切换方式,下载前往官网,另有参考文档 下面简单 ...
- Python 基础-python函数
函数 1.def 2.命名 3.函数体 4.return 返回值 def get_return(): a = 1 return a 函数参数有 形参和实参 定义几个形参就 ...
- 我和CPP的第二次约会
1.变量之间的运算形式依赖于变量的数据类型,如i = i + j;当 i 和 j 是整型或者浮点型,则代表两个数的相加,如果是第一章所说的Sales_item类型,那么就是这两个变量的成分相加(如果书 ...