jQuery를 UI의 API - .toggleClass ()
범주
특수 효과 (효과) | 효과 코어 (코어 효과) | 메소드 오버로딩 (방법 오버라이드 (override))
용법
설명 : 애니메이션 스타일 클래스 존재 추가하거나, 하나 이상의 클래스를 제거하기 위해 각 요소의 정합 소자들의 세트 내의 스위치 파라미터의 값에 따라 변화하는 경우.
반환 값 : JQuery와
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
| 参数 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| ClassName | String | 为匹配的元素集合中的每个元素要切换的一个或多个 class 名称，多个 class 名称用空格分隔 。 | |
| switch | Boolean | 一个布尔值，指定 class 应被添加还是被移除。 | |
| duration | Number 或 String | 一个字符串或一个数字，指定动画将运行多久。 | 400 |
| easing | String | 一个字符串，指示要使用的 easing 函数。 | swing |
| complete | Function() | 一旦动画完成时要调用的函数。 |
.toggleClass( className [, switch ] [, options ] )
| 参数 | 类型 | 描述 |
|---|---|---|
| ClassName | String | 为匹配的元素集合中的每个元素要切换的一个或多个 class 名称，多个 class 名称用空格分隔 。 |
| switch | Boolean | 一个布尔值，指定 class 应被添加还是被移除。 |
| options | Object | 所有的动画设置。所有的属性是可选的。
|
스타일 변화의 모든 세부 사항은 자바 스크립트를 사용하지 않고 CSS를 통해 수행되는 것을 보장하면서 기본 CSS와 유사한, jQuery를 UI의 애니메이션 클래스는, 변화의 하나의 상태로부터 다른 상태로의 원활한 전환을 제공합니다 전환. 모든 클래스 애니메이션, 포함 .toggleClass() , 사용자 정의 애니메이션의 기간과 수 있습니다 완화 애니메이션도 완료 콜백을 제공, 기능.
모든 스타일이 추가 애니메이션 할 수 없습니다. 예를 들어, 배경 이미지 애니메이션. 영화가 끝날 때되지 않은 애니메이션 스타일이 변경됩니다.
jQuery를에서 플러그인 확장 내장 .toggleClass () 메소드를. jQuery를 UI가로드되지 않은 경우, 전화 .toggleClass() 메소드가 jQuery를에 존재하기 때문에, 단순히 실패하지 않는 방법을. 그러나 예상 된 동작하지 않습니다.
예
스위칭 소자 클래스 "큰 블루"를 일치합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> .toggleClass () 데모 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스타일>
사업부 {
폭 : 100 픽셀;
높이 : 100 픽셀;
배경 색상 : #ccc;
}
.big 블루 {
폭 : 200 픽셀;
높이 : 200 픽셀;
배경 색상 : # 00F;
}
</ 스타일>
<스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
<DIV> </ DIV>
<스크립트>
$ ( "사업부") .click (함수 () {
$ (이) .toggleClass ( "큰 블루", 1000, "easeOutSine");
});
</ 스크립트>
</ BODY>
</ HTML>