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

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

1200 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 (m.sbmmt.com) pour plus de contenu connexe !