如何用jQuery中的简单动画？ jquery 动态html css

animte函数

CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画，比如：

$(“#content”).animate({height:”100px”});

直接按F12，然后在console中复制上面代码即可执行。

该函数的接口是：

$(selector).animate(styles,options)

$(selector).animate(styles,speed,easing,callback)

对于第一种接口options可能的值：speed-设置动画的速度easing-规定要使用的easing函数callback-规定动画完成之后要执行的函数step-规定动画的每一步完成之后要执行的函数queue-布尔值。指示是否在效果队列中放置动画。如果为false，则动画将立即开始specialEasing-来自styles参数的一个或多个CSS属性的映射，以及它们的对应easing函数

如：

$(“#content”).animate({height:”100px”},”linear”);

easing函数

在jQuery1.4.2中,默认提供了提供了两种动画补间效果,线性和摆动运动曲线：但大家需要使用复杂一些的运动效果，比如让元件按照双曲线或抛物线运动趋势改变时，这两个函数就显得明显不够了。不过这实现起来并不复杂，只需要按照相应的数学公式，添加自定义的easing补间动画效果函数即可。比如，现在要让网页上的元件按照y=x^4的曲线运动，运行趋势为先缓后急。jQuery1.4的linear和swing的动画实现代码是这样的，最新版的jQuery做了改进，只使用了一个参数p，但不容易看出各个参数的作用，因此这里使用了一个比较原始版本。

jQuery.extend({

……

easing:{

linear:function(p,n,firstNum,diff){

returnfirstNum+diff*p;

},

swing:function(p,n,firstNum,diff){

return((-Math.cos(p*Math.PI)/2)+0.5)*diff+firstNum;

}

},

……

});