您的位置：首页 > Web前端 > JQuery

jquery基础（7）动画特效

2015-09-06 14:50 645 查看

------------------------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>
b324

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航