Home > Web Front-end > JS Tutorial > body text

In-depth understanding of jquery custom animation animate()

高洛峰
Release: 2016-12-28 09:22:42
Original
1518 people have browsed it

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
Copy after login

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);
Copy after login

There are several other small examples:

Disabled elements:

$('button').attr('disabled', 'disabled'); 
$('button').removeAttr('disabled');
Copy after login

Traverse the element collection:

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

For more in-depth understanding of jquery custom animation animate() related articles, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template