jquery系列教程5-动画操作全解

点击打开：

jquery系列教程1-选择器全解

jquery系列教程2-style样式操作全解

jquery系列教程3-DOM操作全解

jquery系列教程4-事件操作全解

jquery系列教程5-动画操作全解

jquery系列教程6-ajax的应用全解

jquery系列教程7-自定义jquery插件全解

jquery系列教程8-jquery插件大全

jquery中的动画操作全解：

动画函数都可以选择性传递速度和回调函数

显示隐藏

hide(speed,callback)

$cr.hide();                                 //元素隐藏，会记住diaplay原始属性
$cr.css("display","none");                  //元素隐藏，忘记diaplay原始属性
$cr.show();                                 //元素显示，回复diaplay原始属性
$cr.hide('slow');                           //传递字符串型参数  'slow'600ms，'fast'200ms,'normal'400ms。没有参数表示立即实现
$cr.show(1000,function(){                   //传递整型速度参数，和回调函数
alert("显示结束");
});
$cr.toggle();                               //切换元素可见性动画

透明度

fade(speed,easing,callback)

$cr.fadeOut('slow',"swing");               //元素淡出    "swing" - 在开头/结尾移动慢，在中间移动快,"linear" - 匀速移动
$cr.fadeIn();                               //元素淡入
$cr.fadeTo(600,0.2);                        //改变元素不透明度动画
$cr.fadeToggle();                           //改变元素不透明度实现元素可见性动画

滑动

slide(speed,callback); 改变元素的display属性

$cr.slideDown();                            //向下滑动元素
$cr.slideUp();                              //向上滑动元素
$cr.slideToggle();                          //切换元素高度动画

自定义动画

animate({params},speed,callback)

if(!$cr.is(":animated")){                   //判断元素是否处于动画状态
$cr.animate({                       //同一个animate内的动画为并行
left:'250px',                   //position属性必须设置成relative或absolute
height:'+=150px',               //使用相对值
width:'toggle'                  //可以把属性的动画值设置为 "show"、"hide" 或 "toggle"。其中opacity的'show'表示fadeIn， height的'show'表示slideDown，在属性上设置show表示出现
},'slow',function(){
alert("动画执行完成");
})
.delay(1000)                          //延迟时间，使用链式写法
.animate({fontSize:'3em'},"slow");    //多个animate之间是顺序执行的
}else{
//停止动画  stop(stopAll,goToEnd);  stopAll表示是否清除后续所有动画，默认false，goToEnd表示当前动画是否立即执行完成，默认为false。
$cr.stop();                               //不带参数时，会清除在被选元素上指定的当前动画
}