Latest web development tutorials

의 jQuery UI의 API - 컬러 애니메이션 (컬러 애니메이션)

jQuery를 UI 코어는 특별한 사용하여 효과를 추가 rgb() , rgba() 와 같은 16 진수 값이나 색상 이름 "aqua" 동적 기능 색상 속성을 변경할 수 있습니다. 당신 만이 jQuery를 UI 영향 코어 파일을 포함 할 필요가 .animate() 색상을 지원합니다.

그것은 다음과 같은 속성을 지원합니다 :

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • columnRuleColor
  • outlineColor
  • textDecorationColor
  • textEmphasisColor

에서 컬러 애니메이션에 대한 지원 jQuery를 색상 플러그인 . 컬러 플러그인은 칼라 기능을 제공한다. 전체 문서를 보려면 방문 jQuery를 컬러 문서를 .

애니메이션 클래스 (클래스 애니메이션)

이 색상을 애니메이션 할 수 있지만 직접 속성,하지만 일반적으로 더 나은 대안 방법은 클래스의 스타일을 포함하는. jQuery를 UI는 동적으로 CSS 클래스를, 즉 추가하거나 제거 할 방법을 제공 .addClass() , .removeClass() , .toggleClass() 및 .switchClass() . 이러한 방법은 자동으로 속성이 변경 될 필요가 무엇 적절한 애니메이션을 적용 할 필요가있는 결정합니다.

예 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> 컬러 애니메이션 (컬러 애니메이션) 데모 </ 제목>
  <링크 REL = "스타일 시트"HREF = "http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스타일>
  #elem {
    색상 : # 006;
    배경 색상 : #aaa;
    글꼴 크기 : 25 픽셀;
    패딩 : 1em;
    텍스트 정렬 : 센터;
  }
  </ 스타일>
  <스크립트 SRC = "http://code.jquery.com/jquery-1.10.2.js"> </ script>
  <스크립트 SRC = "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
 
<사업부 아이디 = "ELEM"> 컬러 애니메이션 </ DIV>
<버튼 ID = "토글"> 색상 변경 </ 버튼>
 
<스크립트>
$ ( "#toggle") .click (함수 () {
  $ ( "#elem") .animate ({
    색상 : "녹색",
    backgroundColor로 "RGB (20, 20, 20)"
  });
});
</ 스크립트>
 
</ BODY>
</ HTML>