JQuery中show( ) 方法和hide( ) 方法会同时修改元素的多个样式属性,即高度、宽度和不透敏度;
fadeOut( ) 方法和fadeIn( ) 方法只会修改元素的不透明度;
slideDown( ) 方法和slideUp( ) 方法只会改变元素的高度。
很多情况下,这些方法无法满足用户的各种需求,那么就需要对动画有更多的控制,需要采取一些高级的自定义动画来解决这些问题。
语法结构为:
animate(params, speed, callback)
参数说明:
a、params:一个包含杨树属性及值的映射
b、speed:速度参数,可选
c、callback:在动画完成是执行的函数,可选
1、自定义简单动画
有一个空白的HTML文档,里面有一个id='panel'的<div>元素,当<div>元素被单击时,能在页面上横向飘动
先给这个<div>元素添加CSS样式
#div{
position:relative;
width:100px;
height:100px;
background-color:#CCCCCC;
}
为#panel元素创建一个单击事件,然后对元素加入animate()方法,是元素在3秒内,向右移动500像素
$('#panel').click(function(){
$(this).animate({left:'500px'}, 3000);
});
2、累加、累减动画
在之前的代码中,如果在500px之前加上 += 或者 -=符号,即表示在当前位置累加或者累减。
$(this).animate({left:'+=500px'}, 3000);
3、多重动画
同时执行多个动画
例如元素在向右滑动的同时,放大元素的高度
$(this).animate({left:'500px', height:'200px'}, 3000);
按顺序执行多个动画
只需要把代码拆开,按顺序写就可以了
$(this).animate({left:'500px'}, 3000);
$(this).animate({height:'200px'}, 3000);
// 链式写法
$(this).animate({left:'500px'}, 3000)
.animate({height:'200px'}, 3000);
4、动画回调函数
如果想要在顺序执行多个动画的最后,将元素式样CSS进行修改,此时不会成功。因为css( ) 方法并不会加入到动画行列中,而是立即执行。
此时可以使用回调函数(callback) 对非动画方法实现排队。
$(this).animate({left:'400px',opacity:'1'}, 3000)
.animate({top:'200px'}, 3000, function(){
$(this).css('border':'5px solid blue');
});
* callback( )回调函数适用于JQery所有的动画效果方法。