Latest web development tutorials

jQuery를 UI 예 - 클래스 전환 (전환 클래스)

애니메이션 스타일 추가하거나, 하나 이상의 클래스를 제거하기 위해 각 요소의 정합 소자들의 세트 내의 클래스 존재와 스위치 파라미터의 값에 따라 변화하는 경우.

더에 대한 자세한 내용은 .toggleClass() 방법의 세부 사항은 API 문서를 참조하십시오 .toggleClass을 () .

.toggleClass () 데모

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

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI 효과 - .toggleClass () 데모 </ 제목>
  <링크 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 픽셀, 패딩 : 1em; 자간 : 0; 글꼴 크기 : 1.2em; 국경 : 1 픽셀 고체 # 000; 배경 : #eee; 색상 : # 333;}
  .newClass {텍스트 들여 쓰기 : 40px; 자간 : .4em, 폭 : 410 픽셀, 높이 100 픽셀, 패딩 : 30 픽셀; 여백 : 10px; 글꼴 크기 : 1.6em;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    $ ( "#button") .click (함수 () {
      $ ( "#effect") .toggleClass ( "합니다 NewClass", 1000);
      false를 반환;
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<사업부 클래스 = "toggler">
  <사업부 아이디 = "효과"클래스 = "합니다 NewClass은 UI 코너 - 모든">
      Etiam 리베로 neque는가 lorem. Sed의의 PEDE에서 언제나하는, eleifend 선관위을 luctus.
  </ DIV>
</ DIV>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> 실행 효과 </a>에
 
 
</ BODY>
</ HTML>