一,show()和hide()
show()和hide()方法在不带任何参数的情况,相当于css(“display”,“none/block/inline”),
作用是立即隐藏或显示匹配的元素,不会有任何动画。
如果需要带动画,可以向show()方法中,加入参数
exp:$(‘#id‘).show("slow");
$(‘#id‘).show(1000);//1000毫秒,相当于1秒
二,fadeIn()和fadeOut()
这两个方法只改变元素的透明度,fadeOut()在指定的一段时间内降低元素的不透明度,直到
元素完全消失("display:none");fadeIn()正好相反。
三,slideUp()和slideDown()
这两个方法只会改变元素的高度
四,自定义动画animate()
可以自定义动画,同时改变元素的高度,宽度,不透明度。
animate(params,speed,callback)
params:一个包含样式属及值得映射{property1:"value1",property:"value2"}
speed:速度参数,可选
callback:在动画完成执行时的函数,可选
$(function(){
$("#panel").click(function(){
$(this).animate({left:"+=500px"},300); //在当前位置累加500px
});
})
五,动画回调函数
动画最后一步时改变元素的样式
$(function(){
$("#panel").click(function(){
$(this).animate({left:"+=500px",opacity:"1"},300);
.animate ({top:"200px",width:"200px"},3000,function(){
$(this).css("border","5px solid blue");
});
})
六,停止动画和判断是否处于动画状态
1,停止元素的动画
stop([clearQueue],[gotoEnd])
clearQueue 是否清空未执行的动画队列
gotoEnd 是否直接将正在执行的动画跳转到末状态
2,判断元素是否处于动画状态
if(!$(element).is(":animated")){
//如果当前没有进行动画,则添加新的元素
}
3,延迟动画 delay()
七,其他动画方法
toggle()
切换可见状态
slideToggle()
通过高度变化切换元素的可见性
fadeTo()
可以把元素的不透明度以渐进的方式调整到指定值
fadeToggle
通过透明度的方式切换元素的可见性