Heim >Web-Frontend >js-Tutorial >Zusammenfassung der Betriebs-CSS-Stilattribute basierend auf jquery animate_jquery
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
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);
Ein paar weitere kleine Beispiele:
Deaktivierte Elemente:
$('button').attr('disabled', 'disabled'); $('button').removeAttr('disabled');
Durchlaufen Sie die Elementsammlung:
$("input:text").each(function(index){ alert(index);//循环的下标值,从0开始 alert(this.value);//自带属性可以用this(Dom)直接取值 alert($(this).attr("type"));//自定义属性需要用attr()取值 });
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 (www.php.cn)!