>  기사  >  웹 프론트엔드  >  Jquery 사용자 정의 애니메이션 animate()에 대한 심층적인 이해

Jquery 사용자 정의 애니메이션 animate()에 대한 심층적인 이해

高洛峰
高洛峰원래의
2016-12-28 09:22:421513검색

어제 갑자기 한 네티즌이 저에게 animate() 메소드가 모든 CSS 속성을 조작할 수 있는지 물었습니다. 네, 그럴 수 있다고 했어요. 그러나 여기에서 모두가 이해해야 할 사항이 있습니다. animate()를 사용할 때 모든 속성 이름은 Camel 표기법으로 작성되어야 합니다. 예를 들어 padding-left 대신 paddingLeft를 사용해야 하고 marginRight를 대신 사용해야 합니다. 여백 오른쪽 등

Jquery 애니메이션(애니메이션 기능)을 사용하여 CSS의 모든 속성을 동적으로 변경할 수 있는 것은 아닙니다. 다음은 JQ가 요소에 대해 작동할 수 있는 일부 속성에 대한 요약입니다.

* 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

이것을 기억하세요. 애니메이션입니다~~

jquery의 animate() 메서드는 CSS가 아닌 속성도 설정할 수 있습니다

언급한 대로 예를 들면 다음과 같습니다.

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

몇 가지 속성이 있습니다. 다른 작은 예. 관련 기사는 PHP 중국어 웹사이트를 주목해주세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.