jQuery动画
1.显示和隐藏 hide()和show()
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ipone秒表</title>
<style type="text/css">
</style>
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="button" value="hide">
<input type="button" value="show">
<p>点击按妞</p>
<div><em>显示和隐藏hide()和show()动画</em></div>
<img src="http://img.tongji.linezing.com/3455448/tongji.gif"/>
<script language="JavaScript">
//无参
$(function () {
$("input:first").click(function () {
$("p").hide();//隐藏
});
$("input:last").click(function () {
$("p").show();//显示
})
})
//带参,传的参数可以控制显示和隐藏的过程
show(duration,[callback]);
hide(duration,[callback]);
//duration表示动画执行时间的长短,可以表示速度的字符串,包括slow,normal,fast表示时间的整数(毫秒)
//callback:表示回调函数,一般在动画完成之后才执行
$(function () {
$("input:first").click(function () {
$("p").hide(300);//隐藏
});
$("input:first").click(function () {
$("p").show(300);//显示
})
})
//2使用fadeIn()和fadeOut()
对于动画的效果隐藏和显示,jQuery提供这两种方法,其效果类似褪色,语法和show和hide一样
fadeIn(duration,[callback]);
fadeOut(duration,[callback]);
$(function () {
$("input:eq(0)").click(function () {
$("img").fadeOut(3000);//逐渐fandeOut
});
$("input:eq(0)").click(function () {
$("img").fadeIn(3000);//逐渐fandeIn
});
})
//3.fadeTo():表示将被选的元素的不透明度逐渐的改变成为指定的值
$(function () {
$("input:eq(0)").click(function () {
$("img").fadeIn(1000);
});
$("input:eq(2)").click(function () {
$("img").fadeTo(1000,0.5);
})
})
//4.幻灯片效果:sildeUp和sildeDown
$(function () {
$("input:eq(0)").click(function () {
$("div").add("img").sildeUp(1000);
});
$("input:eq(1)").click(function () {
$("div").add("img").sildeDown(1000);
})
$("input:eq(2)").click(function () {
$("div").add("img").hide(1000);
});
$("input:eq(3)").click(function () {
$("div").add("img").show(1000);
})
})
</script>
</body>
</html>
自定义动画
概述:考虑到框架的通用性和代码文件的大小,jQuery不能覆盖所有的动画,提供了animate()方法,可以使开发者自定义动画
animate()一共有两种形式:
用法如下:
animate(params,[duration],[easing],[callback]);
params:表示为希望进行变换的css属性列表,以及希望变化到的最终值
duration:为可选项,表示动画的持续时间
easing:可选参数《通常供动画的插件使用,用来控制节奏的变化过程,在jQuery值提供两个值:linear和swing
callback:表示回调函数,在动画完成之后触发
注意:
params中的变量遵循camel命名方式,params只能是css中数值表示的属性:如width,top,opacity
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ipone秒表</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#pox{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 200px;
}
</style>
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="button" class="button" value="开始"/>
<input type="button" class="stop" value="停止"/>
<input type="button" class="animal" value="查找运动中的动画"/>
<div id="box">box</div>
<div id="pox">pox</div>
<script language="JavaScript">
$(function () {
$(".button").animate({
left:"300px"//注意:想要使用left,right,top,bottom这些方向性的属性,必须对#box元素设置css绝对定位
})
})
//自定义动画中,每一次开始运动都必须是初始位置或者初始的状态,
// 而有时我们想通过当前位置或者状态下再进行动画,jQuery提供自定义动画的累加或累减功能
$(".button").click(function () {
$("#box").animate({
left:"+=50px"//表示每点击一次,.button按钮#box元素就往左边移动50px;
})
})
//-------同步动画
//一个css变化就是动画效果,如:
// 已经有四个css辩护(分别是:width,height,opacity,fontsize的变化)
//实现了多重动画同步运动的效果(多重同步运动的效果就是这四个css属性的值在同一时间,同时变化)
$(".button").click(function () {
$("#box").animate({
width:"300px",
height:"200px",
opacity:0.5,
fontSize:"30px"
})
})
//队列动画
//通过回调函数实现队列动画
//效果:首先#box的宽度设置为300px,高度设置为200px,透明度设置我50%,字体的大小150px,
$(".button").click(function () {
$("#box").animate({width:"300px"},1000,function () {
$("#box").animate({height:"200px"},1000,function () {
$("#box").animate({opacity:0.5},1000,function () {
$("#box").animate({fontSize:"150px"},1000,function () {
alert("完事")
});
});
});
});
})
//在同一个元素基础上,使用链式调用实现队列动画
$(".button").click(function () {
$("#box")
.animate({width:"300px"},1000)
.animate({height:"200px"},1000)
.animate({opacity:0.5},1000)
.animate({fontSize:"150px"},1000,function () {
alert("队列动画执行完毕")
})
})
//如果有多个元素就不能实现,两个元素的动画是同时执行,属于#box的那两段动画执行
.animate({width:"300px"},1000)和 .animate({opacity:0.5},1000),同时执行
#pox 的动画.animate({height:"200px"},1000)和 .animate({fontSize:"150px"},1000
$(".button").click(function () {
$("#box").animate({width:"300px"},1000);
$("#pox").animate({height:"300px"},1000);
$("#box").animate({opacity:0.5},1000);
$("#pox").animate({fontSize:"150px"},1000);
})
//注意:
//不管有几个元素,需要依次实现队列动画的效果(只能用回调函数嵌套的方式去实现)
$(".button").click(function () {
$("#box").animate({width:"300px"},1000,function () {
$("#pox").animate({height:"200px"},1000,function () {
$("#box").animate({opacity:0.5},1000,function () {
$("#pox").animate({fontSize:"150px"},1000)
});
});
});
//动画与非动画 进行队列queue()
//如何实现一个普通css属性里的背景颜色队列效果的动画
$(".button").click(function () {
$("#box").slideUp(1000).slideDown(1000).css("backgroud","red");
})
//或者先让#box滑动隐藏,在滑动显示,最后改变其颜色
//css()方法不是动画的方法,会和第一个动画同时执行,非动画不能队列
//实现动画和非动画一起队列,可以使用回调函数实现
$(".button").click(function () {
$("box").slideUp(1000).slideDown(1000,function () {
$(this).css("backgroud","red")
}).hide(3000);
})
//但如果按上面的写法,当队列动画过多时,可读性下降,使原本的动画方法不够清晰,
// 所以,需要得到一个相对独立的方法,jQuery提供queue()方法;
$(".button").click(function () {
//三个动画
$("#box").slideUp(1000).slideDown(1000).queue(function () {
$(this).css("backgroud","red");
})
//如果想要继续在.queue()方法后面再加一个隐藏动画,queue方法无法实现,
// 这是由于该方法自身的特性导致的
// 想要实现在queue方法后面添加若干动画,
// jQuery的queue()的回调函数可以传递一个参数,这个参数是next()函数,
// 在结尾处去调用next()方法,即可实现链式执行队列动画
//链式编程实现队列动画
$(".button").click(function () {
//四个动画
$("#box").slideUp(1900).slideDown(1000).queue(function (next) {//这个next是一个函数
$(this).css("backgroud","red");
next();
}) .hide(1000);
})
//顺序编程实现队列动画
$(".button").click(function () {
$("#box").slideUp(1000);
$("#box").slideDown(1000);
$("#box").queue(function (next) {
$(this).css("backgroud","red");
next();
});
$("#box").hide(1000);
});
//注意:因为next函数是jQuery1.4版本之后才出现,
// 之前可以用.dequeue(),执行下一个元素队列中的函数
//使用dequeue()
$(".button").click(function () {
$("#box").slideUp('slow').slideDown('solw').queue(function () {
$(this).css("backgroud","red");
$(this).dequeue();//相当于上面的next函数,这里的function不需要传递next函数的参数
}).hide(1000);
})
})
//动画的清除clearqueue();
//清理队列,
//如:我想在执行完第二个动画后就不再执行,
// 只要在第二个动画的回调函数里添加clearqueue()函数就可以停止后面的动画
$(".button").click(function () {
$("#box").slideUp(1000).slideDown(1000,function () {
$(this).clearQueue()
}).queue(function (next) {
$(this).css("backgroud","red");
}).hide(1000);
})
//获取队列动画的长度
function getQueueCount() {
return $("#box").queue("fx").length;//fx表示默认的队列参数
};
//用法:
$(".button").click(function () {
$("#box").slideUp(1000,function () {
alert(getQueueCount())
}).slideDown(1000,function () {
alert(getQueueCount())
}).queue(function (next) {
alert(getQueueCount());
$(this).css("backgroud","red");next()
}).hide(1000,function () {
alert(getQueueCount())
})
})
//动画的停止stop()
//jQuery提供一个动画停止的方法stop
它里面有两个参数,clearQueue:传递一个布尔,代表是否清除动画
gotoEnd:表示是否直接将正在执行的动画跳转到末尾的状态
$(".button").click(fun
$("#box").animate({left:"1000px"},3000)
);
$(".stop").click(function () {
$("#box").stop();//表示将#box这个元素的动画停止掉,没有参数的stop()函数只是一个单纯的动画停止的方法
})
//队列动画的停止
$(".button").click(function () {
$("#box").animate({left:"300px"},1000)
.animate({bottom:"300px"},1000)
.animate({width:"300px"},1000)
.animate({height:"300px"},1000);
})
$(".stop").click(function () {
$("#box").stop();//如果使用没有参数的stop函数去停止队列动画,
// 那么只会停止第一个队列动画,后面的队列动画会在继续执行
})
//如果想要将队列动画全部停止,可以在stop函数里传参数
// 第一个参数:如果为true,表示停止并清除后面的队列动画,即动画完全停止(默认为false)
//第二个参数:如果为true:表示停止并清除掉后面的队列动画,并且
//
//当前的动画会立刻跳转至当前这条动画执行完毕的末尾位置
$(".stop").click(function () {
$("#box").stop(true,true);
})
//动画的延迟delay()函数
$(".button").click(function () {
$("#box").delay(2000)//如果delay(2000)写在#box元素后面,表示延迟2秒在执行动画
.animate({left:"300px"},1000)
.animate({bottom:"300px"},1000)
.delay(3000)//如果写在这里,表示animate({left:"300px"},1000):表示这段代码执行完毕后,延迟3秒再执行下面的代码
})
//获取当前正在执行的动画animated()函数表示(过滤器)
$(".button").click(function () {
$("#box").slideUp(1000,function abc() {
$(this).slideToggle(1000,abc);//无限循环调用自己,实现动画不停的执行
})
//或者用一下方法也可以实现动画不停的执行
$("#box").slideToggle(1000,function () {
$(this).slideToggle(1000,arguments.callee);//arguments.callee:表示调用自身
})
$(".animal").click(function () {
//获取当前正在执行的动画,并将它的颜色改为蓝色后停止动画的执行
$(":animated").css("backgroud","blue").stop(true);
})
})
//动画的全局属性
[$.fx.off属性可以关闭页面上所有的动画]
[$.fx.interval属性表示可以调整动画每一秒运行的帧数]//适用于设置jQuery动画
$.fx.interva:适用于设置jQuery动画,每个多少毫秒绘制一个帧图像(默认13毫秒)
数字越小越流畅,但可能会影响浏览器的性能
//设置动画绘制一帧帧的时间为100毫秒
$.fx.interval=100;
//关闭页面上的所有的动画
$.fx.off=true;
//补充:
在.animate()方法中有宇哥可选参数easing运动方式,这个参数大部分的值需要插件完成
自带的有两个参数:
swing(缓动)(默认)
linear(匀速)
$(".button").click(function () {
}
//表示在一秒时间内,以缓动运动的方式运行动画
$("#box").animate({left:"300px"},1000,'swing');//swing表示缓动运动,就是刚开始运行慢,到中间比较快,最后慢,两头慢,中间快
//让其匀速运动,表示在一秒内完成
$("#pox").animate({left:"800px"},1000,'linear');
})
</script>
</body>
</html>