Jquery库自带的动画效果方法记录
1.显示和隐藏hide()和show()
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(); //隐藏
});
$("input:last").click(function() {
$("p").show(); //显示
});
});
</script>
<input type="button" value="Hide">
<input type="button" value="Show">
带参数的hide()和show()
show(duration,[callback]);
hide(duration,[callback]);
其中,duration表示动画执行时间的长短,可以表示速度的字符串,包括slow,normal,fast.也可以是表示时间的整数(毫秒)。callback是可选的回调函数。在动画完成之后执行
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(300); //隐藏
});
$("input:last").click(function() {
$("p").show(500); //显示
});
});
</script>
2.显隐fadeIn()和fadeOut()
动画效果显隐,他们的动画效果类似褪色,语法与slow()和hide()完全相同。
fadeOut()的相关参数:
speed,可选。规定元素从当前透明度到指定透明度的速度。可能的值:毫秒 (比如 1500)"slow";"normal";"fast".
opacity,必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback ,可选。fadeTo 函数执行完之后,要执行的函数。除非设置了 speed 参数,否则不能设置该参数
3.fadeTo()
fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(1000);
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000);
});
$("input:eq(2)").click(function() {
$("img").fadeTo(1000, 0.5);
});
$("input:eq(3)").click(function() {
$("img").fadeTo(1000, 0);
});
});
</script>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">
4.幻灯片效果slideUp()和slideDown()
slideUp()和slideDown()来模拟PPT中的类似幻灯片拉帘效果
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("div").add("img").slideUp(1000);
});
$("input:eq(1)").click(function() {
$("div").add("img").slideDown(1000);
});
$("input:eq(2)").click(function() {
$("div").add("img").hide(1000);
});
$("input:eq(3)").click(function() {
$("div").add("img").show(1000);
});
});
</script>
<input type="button" value="SlideUp">
<input type="button" value="SlideDown">
<div></div><img src="04.jpg">
4.自定义动画
考虑到框架的通用性及代码文件的大小,jQuery不能涵盖所有的动画效果,但它提供了animate()方法,能够使开发者自定义动画。本节主要通过介绍animate()方法的两种形式及应用。
animate()方法给开发者很大的空间。它一共有两种形式。第一种形式比较常用。用法如下
animate(params,[duration],[easing],[callback])
其中params为希望进行变幻的css属性列表,以及希望变化到的最终值,duration为可选项,与show()/hide()的参数含义完全相同。easing为可选参数,通常供动画插件使用。 用来控制节奏的变化过程。jQuery中只提供了linear和swing两个值.callback为可选的回调函数。在动画完成后触发。
需要注意。params中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.另外,params只能是css中用数值表示的属性。例如width.top.opacity等
像backgroundColor这样的属性不被animate支持。
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
}
</style>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("#block").animate({
opacity: "0.5",
width: "80%",
height: "100px",
borderWidth: "5px",
fontSize: "30px",
marginTop: "40px",
marginLeft: "20px"
}, 2000);
});
});
</script>
<button id="go">Go>></button>
<div id="block">动画!</div>
在params中,jQuery还可以用“+=”或者"-="来表示相对变化
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
position: absolute;
}
</style>
<script type="text/javascript">
$(function() {
$("button:first").click(function() {
$("#block").animate({
left: "-=80px" //相对左移
}, 300);
});
$("button:last").click(function() {
$("#block").animate({
left: "+=80px" //相对右移
}, 300);
});
});
</script>
<button >Go>></button>
<button >Go>></button>
<div id="block">动画!</div>
先将div进行绝对定位,然后使用animate()中的-=和+=分别实现相对左移和相对右移。
animate()方法还有另外一种形式,如下所示:
animate(params,options)
其中,params与第一种形式完全相同,options为动画可选参数列表,主要包括duration,esaing,callback,queue等,其中duration.easing.callback与第一种形式完全一样,queue为布尔值,表示当有多个 animate()组成jQuery时,当前animate()紧接这下一个animate(),是按顺序执行(true)还是同时触发false.
animate()第二种用法:
<style>
div {
background-color: #FFFF22;
width: 100px;
text-align: center;
border: 2px solid #000000;
margin: 3px;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
input {
border: 1px solid #000033;
}
</style>
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
//第一个animate与第二个animate同时执行,然后再执行第三个
$("#block1").animate({
width: "90%"
}, {
queue: false,
duration: 1500
})
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(1)").click(function() {
//依次执行三个animate
$("#block2").animate({
width: "90%"
}, 1500)
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(2)").click(function() {
$("input:eq(0)").click();
$("input:eq(1)").click();
});
$("input:eq(3)").click(function() {
//恢复默认设置
$("div").css({
width: "",
fontSize: "",
borderWidth: ""
});
});
});
</script>
<input type="button" id="go1" value="Block1动画">
<input type="button" id="go2" value="Block2动画">
<input type="button" id="go3" value="同时动画">
<input type="button" id="go4" value="重置">
<div id="block1">Block1</div>
<div id="block2">Block2</div>
以上两个div块同时运用了三个动画效果,其中第一个div快的第一个动画添加了queue:false参数,使得前两项两个动画同时执行.
Jquery库自带的动画效果方法记录的更多相关文章
- JQuery实现的模块交换动画效果
<!doctype html> <html> <head> <meta http-equiv="content-type" content ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- jQuery学习之旅 Item9 动画效果
1.元素的显示和隐藏 display:none; 隐藏 display:block; 显示 简单显示和隐藏方法 a) show() 显示 b) hide() 隐藏 c) toggle() 开关,显示则 ...
- JQuery插件 aos.js-添加动画效果
原文地址:http://www.mamicode.com/info-detail-1785357.html 简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页 ...
- JQuery模拟实现天猫购物车动画效果
测试程序源代码下载地址:源码 一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: < ...
- 【Demo】jQuery 轮播图简单动画效果
功能实现: (1)设定图片称号的鼠标悬停事件: (2)在事件中利用自定义动画函数调整显示图片,并修改对应标号样式: (3)为图片显示区域设定鼠标悬停事件: (4)当鼠标停在该区域时,清除图片切换动画定 ...
- jQuery 自带的动画效果
1.方法: show:显示选中元素. hide:隐藏选中元素. toggle:显示或隐藏选中元素. fadeIn:将选中元素的不透明度逐步提升到100%. fadeOut:将选中元素的不透明度逐步降为 ...
- jQuery中的事件和动画效果
刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可 ...
随机推荐
- 设计模式入门之职责链模式Chain Of Responsibility
//职责链模式:使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. //实例:申请费用的功能,不同金额的费 ...
- UVa 836 - Largest Submatrix
题目:给你一个n*n的01矩阵,求里面最大的1组成的矩形的米娜及. 分析:dp.单调队列.UVa 1330同题,仅仅是输入格式变了. 我们将问题分解成最大矩形.即求解以k行为底边的图形中的最大矩形.然 ...
- SVN中tag branch trunk用法详解
SVN中tag branch trunk用法详解 2010-05-24 18:32 佚名 字号:T | T 本文向大家简单介绍一下SVN中tag branch trunk用法,SVN中tag bran ...
- Flashback Version/Transaction Query
1.应用Flashback Version Query查询记修改版本 SQL> select dbms_flashback.get_system_change_number from dual; ...
- textarea高度自适应问题
textarea中的文字如果过多,就会产生滚动条,一本分文本被遮盖住,不能看到所有的文本. 那么,如何才能让textarea的高度随输入内容多少,可以自动的改变高度呢? 解决思想: 1 利用conte ...
- Intent中的重要属性详解
Intent中的四个重要属性主要有四个,分别是Action.Data.Category.Extras. Intent作为联系各Activity,BroadcaseReciver,Service之间的纽 ...
- Category类别
1.在已有类的基础上进行扩展,无需像继承一样子类化,就可以直接添加一些方法 2.继承不仅可以添加方法还可以添加属性,类别只能添加方法 3.类别不会改变现有类的方法,万一重写,自己写的优先级高 4.把类 ...
- SQL使用记录
Q:怎么删掉sql server登录时的用户名?(仅仅是删掉那个登录时的提示) A:先关闭数据库登录引擎,然后删除:%AppData%\Microsoft\Microsoft SQL Server\1 ...
- javascript EcmaScript5 新增对象之Object.freeze
我们都知道在js里对象是很容易改变的 var obj1 ={ a:'111' } obj1.a = '222'; console.log( obj.a ) //output 222 对象的属性发生了变 ...
- JavaMail简单接收邮件
一个简单的例子,收取所有邮件并在控制台输出. package cn.jmail.test; import java.io.*; import java.util.*; import javax.mai ...