Home >Web Front-end >JS Tutorial >Summary of operating css style attributes based on jquery animate_jquery

Summary of operating css style attributes based on jquery animate_jquery

PHP中文网
PHP中文网Original
2016-05-16 15:29:231190browse

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 attributes in css can be dynamically changed using Jquery animation (animate function). Here is a summary of some attributes 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~~

jquery’s animate() method can also set non-css attributes

As in the title, for example :


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

A few 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()取值 
});

The above is a summary of operating css style attributes based on jquery animate_ The content of jquery, please pay attention to the PHP Chinese website (www.php.cn) for more related content!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn