Jquery学习笔记——动画

参考资料     chapter5/lab.effects.html

 jQuery允许对象呈现某些特殊效果。

　　$('h1').show(); //展现一个h1标题。其中可选参数为 speed和callBack，speed可以为 (String,Number) : String是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)，callback(Function) : (Optional) 在动画完成时执行的函数，每个元素执行一次，this为发生动画的元素。

　　常用的特殊效果如下：

　　.fadeIn() 淡入

　　.fadeOut() 淡出

　　.fadeTo(speed, opacity, callback) : 调整到指定的透明度　　

        fadeToggle()  对元素在淡入、淡出间切换

         .hide() 隐藏元素

　　.show() 显示元素

        .toggle(switch)  根据switch判断是展示或隐藏

　　.slideDown() 向下展开

　　.slideUp() 向上卷起

　　.slideToggle() 展开或卷起切换

        .stop()和.delay()用来停止或延缓特效的执行。

　　$.fx.off如果设置为true，则关闭所有网页特效。

        除了.show()和.hide()，所有其他特效的默认执行时间都是400ms（毫秒），但是你可以改变这个设置。

　　$('h1').fadeIn(300); // 300毫秒内淡入

　　$('h1').fadeOut('slow'); //缓慢地淡出

　　在特效结束后，可以指定执行某个函数。

　　$('p').fadeOut(300, function(){$(this).remove(); });

　　更复杂的特效，可以用.animate()自定义。

       Animate( properties, duration,easing,callBack) :  

                     properties为最终达到的状态对象, 可以指定相对值，如+=5  -=4；只限定于要求数字值的属性，属性值初数字外，也支持以下字符串 hide,show,toggle; 

                     easing为补间效果，可以由插件，如Easing Plugin和Color Animation Plugin提供，默认支持linear和swing：在末尾加快; 

                     callBack动画完成后调用函数。

           注：在1.4中讲Easing Plugin集成进了Jquery.js，可直接调用插件效果， 支持31中效果，如 easingInQuad  easingOutQuad  easingInOutQuad    easingIn |Out| InOut的 Cubic  Quart  Quint  Sine   Expo  Circ   Elastic  Back  Bounce   swing  和linear, 参考网址：http://gsgd.co.uk/sandbox/jquery/easing/  .  而且可以给每个属性指定效果，如

jQuery('#foo').animate({
    left: 500,
    top: [500, 'easeOutBounce']
}, 2000);

        其中支持

         Animate(properties,options)  :

                     options支持的属性： duration，easing，complete：动画完成后调用函数，queue：如果为false，动画不会加入队列而立即开始执行.

         实例：

             　　$('div').animate(

　　　　{

　　　　　　left : "+=50"，//不断右移

　　　　　　opacity : 0.25 //指定透明度

　　　　},

        如淡入和淡出之间的切换： $().animate({property: ‘toggle’},’slow’)

　　　　300, // 持续时间

　　　　function(){ alert('done!'); }//回调函数

　　);