------------------------fadeTo()------------------------------------
调用fadeTo()
方法,可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值,该方法的调用格式为:
$(selector).fadeTo(speed,opacity,[callback])
其中speed参数为效果的速度,opacity参数为指定的不透明值,它的取值范围是0.0~1.0,可选项参数callback为效果完成后,回调的函数名。
----------------------------animate()----stop()----delay()----------------------
调用animate()
方法不仅可以制作简单渐渐变大的动画效果,而且还能制作移动位置的动画,在移动位置之前,必须将被移元素的“position”属性值设为“absolute”或“relative”,否则,该元素移动不了。
例如,调用animate()
方法先将图片向右移动90px,然后,再将图片宽度与高度分别增加30px,如下图所示:
stop()
方法的功能是在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画,它的调用格式为:
$(selector).stop([clearQueue],[goToEnd])
其中,两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。
delay()
方法的功能是设置一个延时值来推迟动画效果的执行,它的调用格式为:
$(selector).delay(duration)
其中参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执行。
<!DOCTYPE html>
<html>
<style type="text/css">
div{
position:absolute;
top:50px;
left:200px;
height:50px;
width:50px;
border:1px solid red;
}
div
{
margin: 10px 0px;
}
span
{
position:absolute;
width:80px;
height:80px;
border: solid 1px #ccc;
margin: 0px 8px;
background-color: Red;
color:White;
vertical-align:middle
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>stop</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<div></div>
<input id="left" type="button" value="左移"/>
<input id="right" type="button" value="右移"/>
<input id="stop" type="button" value="stop">
<input id="huanchong" type="button" value="等待...">
<script type="text/javascript">
$(function(){
var $ltime=0;
var $rtime=0;
var $stop=0;
var $delay=0;
$("#left").bind("click",function(){
$ltime++;
$("div").animate({
left: "-=50px"
},3000,function(){
$("div").html("左移"+$ltime+"次")
})
});
$("#right").bind("click",function(){
$("div").animate({
left: "+=50"
},3000,function(){
$rtime++;
$(this).html("右移"+$rtime+"次")
})
})
$("#stop").bind("click",function(){
$stop++;
$("div").stop();
$("div").html("stop"+$stop+"次")
});
$("#huanchong").bind("click",function(){
$delay++;
$("div").delay(3000);
$("div").html("delay"+$delay+"次")
});
});
</script>
</body>
</html>