JQuery动画函数总结

jquery中常用的动画的方法就是hide与show.

$(element).hide这段代码可以与这相等element.css("display","none")

在hide(time)与show(time)中填入事件，可以慢慢消失跟显现。可以修改元素的多个样式，高度，宽度，不透明度。

另一组方法fadeIn与fadeOut这个与hide跟show不同的是，当使用hide或者show的时候会改变网页的高度，而fadeIn与fadeOut则不会。

$("#panel h5.head").toggle(function{ $(this).addClass("highlight"); $(this).next.fadeOut(1000); },function{ $(this).removeClass("highlight"); $(this).next("div .content").fadeIn(1000); });还有一组是slideUp，slideDown改变高度。

动画方法概括

动画队列

(1)一组元素上的动画效果。

a)当在一个animate方法中应用多个属性时，动画是同时发生的。

b)当以链式的写法应用动画方法时，动画是按照顺序发生的。

(2)多组元素上的动画效果

a)默认情况下，动画都是同时发生的。

b)当以回调的形式应用动画方式时，动画是按照回调顺序发生的。

另外，在动画方法中，要注意其他非动画的方法会插队，例如css方法，要使这些非动画的方法也按照顺序来执行，需要把这些方法写在动画方法的回调函数中。

举一个animate的例子：

$(“#id”).animat({left:”400px”,top:”300px”},3000,function{ $(this).css(“border”,”1px solid blue”); });

若想要动画停止，需要在animate方法前插入stop方法

例如:$(“#id”).stop.animate注意stop中的两个参数。

判断元素是否在动画状态的方法时：

$(element).is(“:animated”);

 

jQuery 可以很方便的为页面中的元素添加一些动态效果，可以用其内建效果，也可以自己定义效果。

下面是一些内建的效果方法：

• $.fn.show 显示所选择的元素
• $.fn.hide 隐藏所选择的元素
• $.fn.fadeIn 淡入
• $.fn.fadeOut 淡出
• $.fn.slideDown 通过垂直滑动的效果来显示元素
• $.fn.slideUp 通过垂直华东的效果来隐藏元素
• $.fn.slideToggle 显示滑动或隐藏滑动交互执行

一个简单的例子：

$('h1').show;

设置动画效果的时长

对于 $.fn.show 和 $.fn.hide 而言，默认情况下其时长是 0，其它效果的默认时长一般是 400 毫秒，当然也自己设置时长：

$('h1').fadeIn(300); // 300 毫秒 $('h1').fadeOut('slow'); // slow 是内建的速度常量

jQuery 默认的速度常量都位于 jQuery.fx.speeds 对象中：

speeds: { slow: 600, fast: 200, // Default speed _default: 400 }

我们也可以扩展这个对象，添加自己常用的速度值：

jQuery.fx.speeds.blazing = 100; jQuery.fx.speeds.turtle = 2000;

回调函数

如果想在动画效果结束后再执行一些代码，那么可以给这些动画方法换入一个回调函数：

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

如果选择器中没有匹配到任何元素，那么回调函数也不会被执行，所以在执行回调函数前做个判断是有必要的：

var $thing = $('#nonexistent'); var cb = function { console.log('done!'); }; if ($thing.length) { $thing.fadeIn(300, cb); } else { cb; }

自定义动画方法

jQuery 中的 $.fn.animate 方法可以用来扩展我们的自定义动画，主要是通过 animate 方法设置元素 CSS 属性来实现的，设置元素 CSS 属性的时候可以使用绝对值，也可以使用相对值：

$('div.funtimes').animate( { left : "+=50", opacity : 0.25 }, 300, // 时长 function { console.log('done!'); // 回调函数 });

但是，用 $.fn.animate 创建自定义动画效果时，不能改变元素的颜色。如果要创建颜色动画，需要依赖其它一些颜色插件。

动画的风格

jQuery 内建的动画风格有两种：swing 和 linear

$('div.funtimes').animate( { left : [ "+=50", "swing" ], opacity : [ 0.25, "linear" ] }, 300 );

控制动画

jQuery 提供了几个方法用来控制动画的执行：

$.fn.stop 停止当前正在执行的动画

$.fn.delay 使动画暂停一段时间：

$('h1').show(300).delay(1000).hide(300);/*这段代码意思是h1在0.3秒内完全显现，停留一秒后，在0.3秒内完全隐藏*/

jQuery.fx.off ：关闭动画的过度效果，相当于把时长设为 0。