Heim > Web-Frontend > js-Tutorial > Zusammenfassung der Betriebs-CSS-Stilattribute basierend auf jquery animate_jquery

Zusammenfassung der Betriebs-CSS-Stilattribute basierend auf jquery animate_jquery

PHP中文网
Freigeben: 2016-05-16 15:29:23
Original
1198 Leute haben es durchsucht

Gestern fragte mich plötzlich ein Internetnutzer, ob die animate()-Methode alle CSS-Attribute bedienen kann? Ja, ich habe ihm gesagt, dass es möglich ist. Allerdings gibt es hier etwas zu beachten, das jeder verstehen muss: Bei der Verwendung von animate() müssen alle Attributnamen in Camel-Notation geschrieben werden. Beispielsweise muss paddingLeft anstelle von padding-left und marginRight anstelle von verwendet werden Rand rechts usw.

Nicht alle Attribute in CSS können mithilfe der Jquery-Animation (Animationsfunktion) dynamisch geändert werden. Hier ist eine Zusammenfassung einiger Attribute, die JQ auf Elemente anwenden kann:

 * 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
Nach dem Login kopieren

Denken Sie daran, dass diese animiert werden können~~

Die animate()-Methode von jquery kann auch Nicht-CSS-Attribute festlegen

Wie im Titel steht: zum Beispiel:


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

Ein paar weitere kleine Beispiele:

Deaktivierte Elemente:

$('button').attr('disabled', 'disabled'); 
$('button').removeAttr('disabled');
Nach dem Login kopieren

Durchlaufen Sie die Elementsammlung:

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

Das Obige ist eine Zusammenfassung der auf CSS-Stilattributen basierenden Bedienung Auf jquery animate_ Der Inhalt von jquery. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage