Maison  >  Article  >  interface Web  >  Compréhension approfondie de l'animation personnalisée jquery animate()

Compréhension approfondie de l'animation personnalisée jquery animate()

高洛峰
高洛峰original
2016-12-28 09:22:421513parcourir

Hier, un internaute m'a soudainement demandé si la méthode animate() pouvait exploiter tous les attributs CSS ? Oui, je lui ai dit que c'était possible. Cependant, il y a quelque chose à noter ici que tout le monde doit comprendre : lors de l'utilisation d'animate(), tous les noms d'attribut doivent être écrits en notation Camel. Par exemple, paddingLeft doit être utilisé à la place de padding-left, et marginRight doit être utilisé à la place de. marge à droite, etc.

Tous les attributs en CSS ne peuvent pas être modifiés dynamiquement à l'aide de l'animation Jquery (fonction animer). Voici un résumé de certains attributs que JQ peut opérer sur les éléments :

* backgroundPosition
 * borderWidth
 * borderBottomWidth
 * borderLeftWidth
 * borderRightWidth
 * borderTopWidth
 * borderSpacing
 * margin
 * marginBottom
 * marginLeft
 * marginRight
 * marginTop
 * outlineWidth
 * padding
 * paddingBottom
 * paddingLeft
 * paddingRight
 * paddingTop
 * height
 * width
 * maxHeight
 * maxWidth
 * minHeight
 * maxWidth
 * font
 * fontSize(在animate函数的css参数指定并不同于标准css属性,例如这个css标准是:font-size。同理上面很多也是这样的情况)
 * bottom
 * left
 * right
 * top
 * letterSpacing
 * wordSpacing
 * lineHeight
 * textIndent
 * opacity

N'oubliez pas ces éléments et vous. peut jouer avec eux C'est animé~~

La méthode animate() de jquery peut également définir des attributs non-css

Comme mentionné, par exemple :

$('body').animate({scrollTop:0}, 1500);
$("body").animate({scrollTop:"-="+50},350);

Il existe plusieurs autres petits exemples. :

Désactiver l'élément :

$('button').attr('disabled', 'disabled'); 
$('button').removeAttr('disabled');

Parcourir la collection d'éléments :

$("input:text").each(function(index){ 
  alert(index);//循环的下标值,从0开始 
  alert(this.value);//自带属性可以用this(Dom)直接取值 
  alert($(this).attr("type"));//自定义属性需要用attr()取值 
});

Pour une compréhension plus approfondie de l'animation personnalisée jquery animate() articles connexes, veuillez faire attention au site Web chinois PHP !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn