jQuery动画与特效详解

前端之家收集整理的这篇文章主要介绍了jQuery动画与特效详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.显示和隐藏hide()和show()

对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏。

代码如下:
显示 }); }); 点击按钮,看看效果

本节主要降级和学习jQuery的自动显隐,渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏。

以上是对hide()和show()函数的测试。

2.使用show()、hide()和toggle()方法

上个例子对show()和hide()方法做了简单介绍,其实这两个方法可以接受参数控制显隐藏过程。 语法如下

show(duration,[callback]); hide(duration,[callback]); 其中,duration表示动画执行时间的长短,可以表示速度的字符串,包括slow,normal,fast.也可以是表示时间的整数(毫秒)。callback是可选的回调函数。在动画完成之后执行

代码如下:
显示 }); });

例子和第一个例子相同,只是对hide()和show()增加了时间参数。其实toogle()也可以加入事件参数。

2.使用fadeIn()和fadeOut()方式

对于动画效果显隐,jQuery还提供了fadeIn()个fadeOut这两个实用的方法,他们的动画效果类似褪色,语法与slow()和hide()完全相同。

fadeIn(duration,[callback]); fadeOut(duration,[callback]); 例子

代码如下:

">

fadeTo()方法的使用。

fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

例子:

代码如下:

fadeOut相关参数

speed 可选。规定元素从当前透明度到指定透明度的速度。

可能的值:

毫秒 (比如 1500) "slow" "normal" "fast" opacity必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。 callback 可选。fadeTo 函数执行完之后,要执行的函数

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

3.幻灯片slideUp和slideDown效果

代码如下:

前面提到了几种动画效果,jQuery还提供了slideUp()和slideDown()来模拟PPT中的类似幻灯片拉帘效果,它与slow()和hide()完全相同。

以上代码定义了一个div和一个img,用add方法组合在一起。

4.自定义动画

考虑到框架的通用性及代码文件的大小,jQuery不能涵盖所有的动画效果,但它提供了animate()方法,能够使开发者自定义动画。本节主要通过介绍animate()方法的两种形式及应用。

animate()方法给开发者很大的空间。它一共有两种形式。第一种形式比较常用。用法如下

animate(params,[duration],[easing],[callback]) 其中params为希望进行变幻的css属性列表,以及希望变化到的最终值,duration为可选项,与show()/hide()的参数含义完全相同。easing为可选参数,通常供动画插件使用。 用来控制节奏的变化过程。jQuery中只提供了linear和swing两个值.callback为可选的回调函数。在动画完成后触发。

需要注意。params中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.另外,params只能是css中用数值表示的属性。例如width.top.opacity等

像backgroundColor这样的属性不被animate支持

代码如下:
div { background-color: #FFFF00; height: 40px; width: 80px; border: 1px solid #000000; margin-top: 5px; padding: 5px; text-align: center; }

先将div进行绝对定位,然后使用animate()中的-=和+=分别实现相对左移和相对右移。

animate()方法还有另外一种形式,如下所示:

animate(params,options) 其中,params与第一种形式完全相同,options为动画可选参数列表,主要包括duration,esaing,callback,queue等,其中duration.easing.callback与第一种形式完全一样,queue为布尔值,表示当有多个 animate()组成jQuery时,当前animate()紧接这下一个animate(),是按顺序执行(true)还是同时触发false

如下例子,展示了animate()第二种用法

代码如下:
div { background-color: #FFFF22; width: 100px; text-align: center; border: 2px solid #000000; margin: 3px; font-size: 13px; font-family: Arial,Helvetica,sans-serif; } input { border: 1px solid #000033; }

猜你在找的jQuery相关文章