所有动画都可以在回调函数[callback]前添加参数[easing]以改变变化的曲线,默认为linear,不需要的参数可以缺省
1、显示、隐藏
①、 (两个动画分开)显示、隐藏hide(spead,[callback]) 以及 show(spead,[callback])
var $container=$("#container");
var $content=$("#content");
var onOff=true;
$container.click(function(){
if(onOff){
$content.hide(2000,function(){
$content.show(1000);
})
}
onOff=!onOff;
)}
②、(两个代码合并,自动切换动画状态)toggle(spead,[callback])
if(onOff){
$content.toggle(2000,function(){
$content.show(1000);
})
}
2、向上滑动、向下滑动
①、(两个动画分开) 向上滑动、向下滑动slideUp(spead,[callback]) 以及 slideDown(spead,[callback])
var $container=$("#container");
var $content=$("#content");
var onOff=true;
$container.click(function(){
if(onOff){
$content.slideUp(2000,function(){
$content.slideDown(1000);
})
}
onOff=!onOff;
)}
②、(两个代码合并)slideToggle(spead,[callback])
if(onOff){
$content.slideToggle(2000,function(){
$content.show(1000);
})
}
3.、淡入、淡出
①、(两个动画分开)淡入、淡出fadeIn(spead,[callback]) 以及 fadeOut(spead,[callback])
var $container=$("#container");
var $content=$("#content");
var onOff=true;
$container.click(function(){
if(onOff){
$content.fadeIn(2000,function(){
$content.fadeOut(1000);
})
}
onOff=!onOff;
)}
②、fadeTo(spead,transparency,[callback])
if(onOff){
$content.fadeTo(2000,0.2,function(){
$content.show(1000);
})
}
③、(代码合并)fadeToggle(spead,[callback])
if(onOff){
$content.fadeToggle(2000,function(){
$content.show(1000);
})
}
4、自定义动画(animate(params,[speed],[easing],[fn]))
警告:animate不支持改变背景颜色backgroundColor
var $divSide= $("#container");
var $divInner=$("#content");
$divSide.click(function(){
$(this).animate({
width:"300px",
height:"400px"
},2000,function(){})
})