Maison > interface Web > js tutoriel > Explication détaillée de l'animation jQuery et des effets spéciaux_jquery

Explication détaillée de l'animation jQuery et des effets spéciaux_jquery

WBOY
Libérer: 2016-05-16 16:16:30
original
1144 Les gens l'ont consulté

1. Afficher et masquer hide() et show()

Pour l'animation, l'affichage et le masquage sont l'un des effets les plus basiques. Cette section présente brièvement l'affichage et le masquage de jQuery.

Copier le code Le code est le suivant :

         ">           
          

Utilisation de la méthode fadeTo(). La méthode

fadeTo() modifie progressivement l'opacité de l'élément sélectionné à la valeur spécifiée.

Exemple :

Copier le code Le code est le suivant :
 
   
   
   
   

   

JQuery a lancé slideUp() et slideDown() pour PPT avec slow().和hide()完全相同。

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

4.自定义动画

考虑到框架的通用性及代码文件的大小,jQuery不能涵盖所有的动画效果,但它提供了animate()方法,能Il s'agit d'un exemple d'animate().两种形式及应用。

animate()方法给开发者很大的空间。用法如下

animer(params,[duration],[easing],[callback])
La durée de vie des paramètres params est css, et la durée est définie par show()/hide().义完全相同。easing为可选参数,通常供动画插件使用。 JQuery a un swing linéaire et un swing linéaire.callback. 🎜>

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

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

复制代码 代码如下 :


       
        Go>>
       
动画!

在params中,jQuery还可以用“ =”或者"-="来表示相对变化。如

复制代码 代码如下 :


       
        Go>>
        Go>>
       
动画!

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

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

animer(params,options)
Params, paramètres, paramètres, options, options, file d'attente, durée, suppression, rappel, file d'attente, durée.easing.callback种形式完全一样,queue为布尔值,表示Il y a animate() dans jQuery, et animate() dans animate(),animate(),false

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

复制代码 代码如下 :