Yesterday, a netizen suddenly asked me whether the animate() method can operate all css attributes? Yes, I told him it could. However, there is something to note here that everyone needs to understand: when using animate(), all attribute names must be written in Camel notation. For example, paddingLeft must be used instead of padding-left, and marginRight must be used instead of margin-right. etc.
Not all properties in css can be dynamically changed using Jquery animation (animate function). Here is a summary of some properties that JQ can operate on elements:
* 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
Remember these can be animated Oh~~
jquery’s animate() method can also set non-css attributes
As in the title, examples:
$('body').animate({scrollTop:0}, 1500); $("body").animate({scrollTop:"-="+50},350);
There are several other small examples:
Disabled elements:
$('button').attr('disabled', 'disabled'); $('button').removeAttr('disabled');
Traverse the element collection:
$("input:text").each(function(index){ alert(index);//循环的下标值,从0开始 alert(this.value);//自带属性可以用this(Dom)直接取值 alert($(this).attr("type"));//自定义属性需要用attr()取值 });
For more in-depth understanding of jquery custom animation animate() related articles, please pay attention to the PHP Chinese website!