Maison > interface Web > js tutoriel > Résumé des attributs de style CSS opérationnels basés sur jquery animate_jquery

Résumé des attributs de style CSS opérationnels basés sur jquery animate_jquery

PHP中文网
Libérer: 2016-05-16 15:29:23
original
1194 Les gens l'ont consulté

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
Copier après la connexion
<. 🎜 >

N'oubliez pas qu'ils peuvent être animés~~

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

Comme dans le titre, par exemple :


$(&#39;body&#39;).animate({scrollTop:0}, 1500);
$("body").animate({scrollTop:"-="+50},350);
Copier après la connexion

Quelques autres petits exemples :

Éléments désactivés :

$(&#39;button&#39;).attr(&#39;disabled&#39;, &#39;disabled&#39;); 
$(&#39;button&#39;).removeAttr(&#39;disabled&#39;);
Copier après la connexion

Parcourir la collection d'éléments :

$("input:text").each(function(index){ 
  alert(index);//循环的下标值,从0开始 
  alert(this.value);//自带属性可以用this(Dom)直接取值 
  alert($(this).attr("type"));//自定义属性需要用attr()取值 
});
Copier après la connexion
Ce qui précède est un résumé des attributs de style CSS basés sur sur jquery animate_ Le contenu de jquery, veuillez faire attention au site Web PHP chinois (www.php.cn) pour plus de contenu connexe !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal