首页 > 代码库 > jQuery动画

jQuery动画

jQuery任何动画都能指定3种速度参数"slow","normal","fast"(时间分别是0.6s  0.4s  0.2s),使用该3参数时必须加引号。另外还可以使用数字作为时间参数,例如show(1000)。

1、show()和hide()方法

  show()方法 最后将元素的display属性设置为block。

  hide()方法 最后将元素的display属性设置为none。

  如果不给参数,就是直接将元素隐藏或显示,不会有任何动画。

  如果给这2个方法设置参数  会出现一个宽度、高度和透明度分别同时改变的动画效果。

2、fadeIn()和fadeOut()方法 只改变透明度的动画效果

  fadeIn()方法  元素的opacity从0到1直到显示的动画过程。

  fadeOut()方法 元素的opacity从1到0直到完全消失的动画过程。

3、slideUp()和slideDown()方法 通过改变高度实现动画效果

  slideDown() 从上到下过渡显示

  slideUp() 从下到上过渡隐藏

4、animate() 自定义动画

  animate(params, speed, callback);  可以用animate()方法来操作几乎所有的css属性。但是属性名要使用驼峰写法比如fontSize而不是连字符"-",另外色彩动画不包含在jquery核心库中

  params一个包含样式属性和值的映射 {"property1":"value1", "property2:"value2", "propertyN":"valueN"}。

  speed 效果的时长。

  callback 动画完成之后的回调函数。

  当同时编写多个animate()调用,jQuery会创建包含这些调用的队列,然后逐一运行这些调用。

 

jQuery动画