现在我们使用animate()方法实现一个综合的动画效果。
单击<div>后让它向右移动的同时增大它的高度，并且将它的不透明度从100%变换成50%，然后再让它从上到下移动，同时宽度变大，不透明度又从50%变换成100%，当这些效果完成后，再把它的边框变成{borer:5px solid bule;}
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>自定义动画方法animate()</title><script language="javascript" src="jquery-1.3.1.js"></script><style type="text/css">#panel
{ position:relative; width:100px; height:100px; border:1px solid #0050d0; background:#96e555; cursor:pointer;}</style><script language="javascript"> $(function(){
$("#panel").css("opacity","1");
$("#panel").click(function(){ $(this).animate({left:"+=500px",height:"300px",opacity:"0.5"},3000) .animate({top:"300px",width:"300px",opacity:"1"},3000) .animate({border:"5px solid blue"})
});
})</script></head><body><div id="panel"></div></body></html>
我们也可以使用animate()方法中的回调函数参数来实现这样的效果。只需改为：
<
script language
=
"
javascript
"
>
$(function()
{ $("#panel").css("opacity","1"); $("#panel").click(function(){ $(this).animate({left:"+=500px",height:"300px",opacity:"0.5"},3000) .animate({top:"300",width:"300px",opacity:"1"},3000,function(){ $(this).css("border","5px solid blue") }) }); }
)
</
script
>
.css()方法不会加入到动画队列中，所以使用回调函数对非动画方法实现排队。
动画队列
1)一组元素上的动画效果
当在一个animate()方法中应用多个属性时，动画是同时发生的。
当以链式的写法应用动画方法时，动画是按照顺序发生的。
2)多组元素上的动画效果
默认情况下，动画都是同时发生的。
当以回调的形式应用动画方式时，动画是按照回调顺序发生的。
另外，在动画方法中，要注意其他动画方法会插队，例如css()方法要使用非动画方法也按照顺充执行，需要把这些方法写在动画方法的回调函数中。
467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
