최고의 의 jQuery UI 예 - 변환 클래스 (스위치 클래스) 튜토리얼 2024년, 이 튜토리얼에서는 .switchClass () 데모,를 배울 수 있습니다.
때 일치하는 요소의 집합 내에서 애니메이션 스타일의 변화는 추가 지정된 클래스의 각 요소를 제거합니다.
더에 대한 자세한 내용은 .switchClass()
방법의 세부 사항은 API 문서를 참조하십시오 .switchClass을 () .
효과를 미리보기 버튼을 클릭합니다.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 효과 - .switchClass () 데모 </ 제목> <링크 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 {위치 : 상대;} .newClass {폭 : 240 픽셀, 패딩 : 1em; 자간 : 0; 글꼴 크기 : 1.2em; 여백 : 0;} .anotherNewClass {텍스트 들여 쓰기 : 40px; 자간 : .4em, 폭 : 410 픽셀, 높이 100 픽셀, 패딩 : 30 픽셀; 여백 : 10px; 글꼴 크기 : 1.6em;} </ 스타일> <스크립트> $ (함수 () { $ ( "#button") .click (함수 () { $ ( ".newClass") .switchClass ( "합니다 NewClass", "anotherNewClass", 1000); $ ( ".anotherNewClass") .switchClass ( "AnotherNewClass", "합니다 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>