Latest web development tutorials

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

컬러 애니메이션을 달성하기 위해 .animate ()를 사용합니다.

컬러 애니메이션 (컬러 애니메이션) 세부 사항에 대한 자세한 내용은 API 문서를 참조하십시오 컬러 애니메이션 (컬러 애니메이션) .

jQuery를 UI는 jQuery를 색상 플러그인, jQuery를 색상 플러그인 컬러 애니메이션 및 기타 여러 색상 관련 유틸리티 기능을 제공 번들.

애니메이션 (애니메이션) 데모

효과를 미리보기 버튼을 클릭합니다.

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI 효과 - 애니메이션 (애니메이션) 데모 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
    .toggler {폭 : 500 픽셀, 높이 200 픽셀; 위치 : 상대;}
    #button {패딩 : .5em 1em; 텍스트 장식 : 없음;}
    #effect {폭 : 240 픽셀, 높이 : 135px; 패딩 : 0.4em; 위치 : 상대; 배경 : #fff;}
    #effect H3 {여백 : 0; 패딩 : 0.4em; 텍스트 정렬 : 센터;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    VAR 상태 = TRUE;
    $ ( "#button") .click (함수 () {
      경우 (상태) {
        $ ( "#effect") .animate ({
          backgroundColor로 "#의 aa0000"
          색상 : "#fff"
          폭 : 500
        }, 1000);
      } 그밖에 {
        $ ( "#effect") .animate ({
          backgroundColor로 "#fff"
          색상 : "# 000"
          폭 : 240
        }, 1000);
      }
      상태 = 상태!;
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<사업부 클래스 = "toggler">
  <사업부 아이디 = "효과"클래스 = "UI 위젯 콘텐츠 UI 코너 - 모든">
    <H3 클래스 = "UI 위젯 헤더 UI 코너 - 모든"> 만화 (애니메이션) </ H3>
    <P>
      Etiam 리베로 neque는가 lorem. Sed의 PEDE. Nulla의가 lorem metus, adipiscing 유타, 나오지도 luctus, hendrerit 이력서, 마일에서 언제나하는, eleifend 선관위을 luctus.
    </ P>
  </ DIV>
</ DIV>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> 전환 효과 </a>을
 
 
</ BODY>
</ HTML>

데모보기