jQuery를 효과 - 페이드 인과 페이드 아웃

방법 jQuery를 페이딩

jQuery를하면 페이드 아웃 효과 요소 페이드 수 있습니다.

jQuery를 페이드는 다음과 같은 네 가지 방법이 있습니다 :

  • fadeIn ()
  • 사라지다()
  • fadeToggle ()
  • fadeTo ()

jQuery를 fadeIn () 메소드

jQuery를 fadeIn ()는 숨겨진 요소에 퇴색하는 데 사용됩니다.

구문 :

$ (선택) .fadeIn (속도, 콜백);

옵션 속도 매개 변수는 효과의 지속 시간을 지정합니다. 그것은 다음과 같은 값을 사용할 수 있습니다, "느린" "빨리"또는 밀리 초.

선택적 콜백 파라미터는 페이딩의 종료 후 수행 된 함수의 이름이다.

암호:

<! DOCTYPE HTML>
<HTML>
<HEAD>
<스크립트 SRC = "/ JQuery와 / JQuery와 - 1.11.1.min.js"> </ script>
<script>
$ (문서) .ready (함수 () {
$ ( "버튼")을 클릭 (함수 () {.
$ ( "#의 div1") fadeIn ();.
$ ( "#의 DIV2") fadeIn는 ( "느린");.
. $ ( "#의 div3") fadeIn (3000) ;
});
});
</ script>
</ head>

<body>
<p>演示带有不同参数的fadeIn ()方法. </ p>
<버튼>点击这里,使三个矩形淡入</ 버튼>
<br> <br> 가상
<div ID = "div1"스타일 = "폭 : 80 픽셀, 높이 80 픽셀, 디스플레이 : 없음; 배경 색상 : 빨강;"> </ DIV>
로 <br>
<DIV ID = "DIV2"스타일 = "너비 : 80 픽셀, 높이 80 픽셀, 디스플레이 : 없음 ; 배경 색상 : 녹색; "> </ DIV>
로 <br>
<DIV ID ="div3 "스타일 ="너비 : 80 픽셀, 높이 80 픽셀, 디스플레이 : 없음; 배경 색상 : 블루; "> </ DIV>
</ BODY>
</ HTML>

 

jQuery를 페이드 아웃 () 메소드

jQuery를 페이드 아웃 () 메소드는 표시 소자 페이드.

구문 :

$ (선택) .fadeOut (속도, 콜백);

옵션 속도 매개 변수는 효과의 지속 시간을 지정합니다. 그것은 다음과 같은 값을 사용할 수 있습니다, "느린" "빨리"또는 밀리 초.

선택적 콜백 파라미터는 페이딩의 종료 후 수행 된 함수의 이름이다.

암호:

<! DOCTYPE HTML>
<HTML>
<HEAD>
<스크립트 SRC = "/ JQuery와 / JQuery와 - 1.11.1.min.js"> </ script>
<스크립트 유형 = "텍스트 / 자바 스크립트">
$ (문서) .ready (함수 () {
$ ( "버튼")을 클릭 (함수 () {.
$ ( "#의 div1") 페이드 아웃 ();.
$ ( "#의 DIV2") 페이드 아웃이 ( "느린");.
$ ( "#의 div3 ") .fadeOut (3000)]
})
});
</ script>
</ head>

<body>
<P> 다른 매개 변수 () 메소드 페이드 프레젠테이션. </ P>
<버튼> 세 개의 직사각형 페이드 </ 버튼> 여기를 클릭하십시오
로 <br>로 <br>
<DIV ID = "DIV1"스타일 = "너비 : 80 픽셀, 높이 80 픽셀, 배경 색 : 빨강;" > </ DIV>
로 <br>
<DIV ID = "DIV2"스타일 = "너비 : 80 픽셀, 높이 80 픽셀, 배경 색 : 녹색;"> </ DIV>
로 <br>
<DIV ID = "DIV3"스타일 = "폭 : 80 픽셀, 높이 80 픽셀, 배경 색 : 블루;"> </ DIV>
</ BODY>

</ HTML>

 

jQuery를 fadeToggle () 메소드

jQuery를 fadeToggle () 메소드 fadeIn (). 페이드 아웃 () 메소드를 전환 할 수있다.

요소가 남아있는 경우, 다음 fadeToggle ()는 요소 페이드 효과를 추가한다.

요소가 사라질 경우, fadeToggle ()의 요소에 페이드를 추가 할 것이다.

구문 :

$ (선택) .fadeToggle (속도, 콜백);

옵션 속도 매개 변수는 효과의 지속 시간을 지정합니다. 그것은 다음과 같은 값을 사용할 수 있습니다, "느린" "빨리"또는 밀리 초.

선택적 콜백 파라미터는 페이딩의 종료 후 수행 된 함수의 이름이다.

추신 : 코드는 직접 자기 수정 JQuery와의 도입을 가능 복사

암호:

<! DOCTYPE HTML>
<HTML>
<HEAD>
<스크립트 SRC = "/ JQuery와 / JQuery와 - 1.11.1.min.js"> </ script>
<script>
$ (문서) .ready (함수 () {
$ ( "버튼")을 클릭 (함수 () {.
$ ( "#의 div1") fadeToggle ();.
$ ( "#의 DIV2") fadeToggle는 ( "느린");.
. $ ( "#의 div3") fadeToggle (3000) ;
});
});
</ script>
</ head>

<body>

<p> 다른 매개 변수 () 메소드 fadeToggle 프레젠테이션. </ P>
<버튼> 세 개의 직사각형 페이드에 여기를 클릭하십시오 </ 버튼>
로 <br>로 <br>
<DIV ID = "DIV1"스타일 = "너비 : 80 픽셀, 높이 80 픽셀, 배경 색 : 빨강; "> </ DIV>
로 <br>
<DIV ID ="DIV2 "스타일 ="너비 : 80 픽셀, 높이 80 픽셀, 배경 색 : 녹색; "> </ DIV>
로 <br>
<DIV ID ="DIV3 "스타일 = "폭 : 80 픽셀, 높이 80 픽셀, 배경 색 : 블루;"> </ DIV>
</ BODY>

</ BODY>
</ HTML>

 

jQuery를 fadeTo () 메소드

jQuery를 fadeTo () 메소드는 소정의 불투명도 구배 (0과 1 사이의 값)을 허용한다.

구문 :

$ (선택) .fadeTo (속도, 불투명도, 콜백);

소정 길이 때 속도 파라미터는 효과가 필요했다. 그것은 다음과 같은 값을 사용할 수 있습니다, "느린" "빨리"또는 밀리 초.

fadeTo () 메소드는 소정의 불투명도로 설정 페이드 효과 불투명 파라미터 필요할 수 (0 내지 1의 값)한다.

선택적 콜백 파라미터는 실행 완료 후 함수의 함수 이름이다.

암호:

<! DOCTYPE HTML>
<HTML>
<HEAD>
<스크립트 SRC = "/ JQuery와 / JQuery와 - 1.11.1.min.js"> </ script>
<script>
$ (문서) .ready (함수 () {
$ ( "버튼"() 함수 () {클릭합니다.
$ ( "#의 div1") fadeTo (0.15 "느린");.
. $ ( "#의 DIV2") fadeTo는 ( "느린", 0.4);
$ ( "#의 div3을 ") .fadeTo ("), "0.7 느린;
});
});
</ script>
</ head>

<body>

<p> 다른 매개 변수 () 메소드 fadeTo 프레젠테이션. </ P>
<버튼> 세 개의 직사각형 페이드 </ 버튼> 여기를 클릭하십시오
로 <br>로 <br>
<DIV ID = "DIV1"스타일 = "너비 : 80 픽셀, 높이 80 픽셀, 배경 색 : 빨강;" > </ DIV>
로 <br>
<DIV ID = "DIV2"스타일 = "너비 : 80 픽셀, 높이 80 픽셀, 배경 색 : 녹색;"> </ DIV>
로 <br>
<DIV ID = "DIV3"스타일 = "폭 : 80 픽셀, 높이 : 80 픽셀 , 배경 색 : 블루;"> </ div>

</ BODY>
</ HTML>

 

추천

출처www.cnblogs.com/huchong-bk/p/11362577.html