CSS3에서 jQuery UI 특수 효과를 사용하여 컬러 애니메이션을 추가하는 방법 - 인형

응용 프로그램에서 실제 색상 애니메이션을 수행하려면 CSS3에서 animate () 메서드를 사용해야합니다. 이 메소드는 jQuery UI의 다른 문서만큼 잘 작성되지 않았기 때문에 진행중인 작업 인 것 같습니다.

이 방법은 모든 주요 대상 플랫폼과 브라우저에서 작동하는 것으로 보이지만 대상으로해야하는 모든 브라우저에서이 방법이 제대로 작동하는지 실험 해보는 것이 좋습니다. 이 경우 색상이 실제로 전환됩니다. 텍스트 색상을 크게 조절할 수도 있습니다.

다음 예는 가장 일반적으로 사용되는 전환을 보여줍니다. (이 예제의 전체 코드는 다운로드 가능한 코드의 Chapter 06Animations 폴더에서 Animate. HTML로 찾을 수 있습니다.)

$ (function () {// 정상 상태 추적 var State = true; $ ("# ChangeColors "). click (function () {if (State) {// 변경된 상태로 설정 $ ("# SampleText ") animate ({backgroundColor:"# 0000ff ", color:"white ", borderColor:"# $ { "SampleText"} animate ({backgroundColor: "# 7fffff", color: "black", // color: "ff0000", height: 100, width: 600} borderColor: "# 00ff00", height: 50, width: 400}, 1500);} // 상태 변경 State =! State;})})

이 코드가 제대로 작동한다고 생각하면 CSS와 비슷하지만 animate () 메서드는 변경할 수있는 기능 목록을 상당히 줄여줍니다.

너비와 높이를 포함하여 텍스트와 텍스트를 보유하고있는 컨테이너의 많은 기능을 변경할 수 있습니다. 그러나 경계의 색상을 변경할 수 있더라도 모든 것을 고정하는 데 사용되는 테두리 종류와 같은 것은 변경할 수 없습니다. jQuery UI 설명서에는 animate ()가 다음 속성을 지원한다고 나와 있습니다.

• backgroundColor

• borderBottomColor

• borderLeftColor

• borderTopColor

• color

• columnRuleColor

• outlineColor

• textDecorationColor

• textEmphasisColor

• 라이브러리 제공 예제 (공급 업체의 사이트)는 width, height 및 borderColor를 비롯한 몇 가지 다른 속성이 지원됨을 보여줍니다. 이러한 게시되지 않은 속성을주의해서 사용하십시오. 현재는 작동하지만 향후 라이브러리 릴리스에서는 지원되지 않을 수 있습니다.