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