jquery_jquery에서 일반적인 특수 효과 방법을 사용하는 예-JS 튜토리얼-php.cn

jquery_jquery에서 일반적인 특수 효과 방법을 사용하는 예

WBOY

풀어 주다： 2016-05-16 16:51:24

원래의

1243명이 탐색했습니다.

1. jQuery fadeIn()은 숨겨진 요소를 페이드 인하는 데 사용됩니다.

구문:

코드 복사 코드는 다음과 같습니다.

$(selector) .fadeIn( 속도, 콜백);

예:

코드 복사 코드는 다음과 같습니다.

$("button ").click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3 ").fadeIn(3000);
});

2. jQuery fadeOut() 메서드는 보이는 요소를 페이드 아웃하는 데 사용됩니다.

구문:

코드 복사 코드는 다음과 같습니다.

$(selector) .fadeOut(속도,콜백);

3． jQuery fadeToggle() 메서드는 fadeIn()과 fadeOut() 메서드 사이를 전환합니다.

fadeToggle()은 이미 페이드 아웃된 요소에 페이드 인 효과를 추가합니다.

요소가 이미 페이드 인된 경우 fadeToggle()은 요소에 페이드 아웃 효과를 추가합니다.

구문:

코드 복사 코드는 다음과 같습니다.

$(selector) .fadeToggle(속도,콜백);

예: $("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow") ;
$("#div3").fadeToggle(3000);
});

4. 구문:

$(selector).fadeTo(speed,opacity,callback);

필수 속도 매개변수는 효과 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

fadeTo() 메서드의 필수 불투명도 매개변수는 페이드 효과를 지정된 불투명도(0에서 1 사이의 값)로 설정합니다. 예시

코드 복사 코드는 다음과 같습니다.

$("button").click (함수( ){

$("#div1").fadeTo("느림",0.15);

$("#div2").fadeTo("느림",0.4);

$("#div3").fadeTo("느린",0.7);

});

5. jQuery의 SlideDown() 메소드는 요소를 아래로 슬라이드하는 데 사용됩니다.

구문:

코드 복사 코드는 다음과 같습니다.

$(selector) .slideDown(속도,콜백);

코드 복사 코드는 다음과 같습니다.

$("#flip").click (함수( ){
 $("#panel").slideDown();
});

6. jQuery의 SlideUp() 메소드는 요소를 위로 슬라이드하는 데 사용됩니다.

구문:

코드 복사 코드는 다음과 같습니다.

$(selector) .slideUp( speed,callback);

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

선택적 콜백 매개변수는 슬라이딩이 완료된 후 실행될 함수의 이름입니다.

7. jQuery의 SlideToggle() 메서드는 SlideDown()과 SlideUp() 메서드 간에 전환할 수 있습니다.

요소가 아래로 슬라이드되면 SlideToggle()이 요소를 위로 슬라이드합니다.

요소가 위로 슬라이드되면 SlideToggle()이 요소를 아래로 슬라이드합니다.

코드 복사 코드는 다음과 같습니다.

$(selector).slideToggle(speed, 콜백)

8. jQuery animate() 메서드는 사용자 정의 애니메이션을 만드는 데 사용됩니다.

구문:

코드 복사 코드는 다음과 같습니다.

$(selector) .animate({params},속도,콜백);

필수 params 매개변수는 애니메이션을 구성하는 CSS 속성을 정의합니다.

선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.

선택적 콜백 매개변수는 애니메이션이 완료된 후 실행될 함수의 이름입니다.

상대값을 정의하는 것도 가능합니다(값은 요소의 현재 값을 기준으로 합니다). 값 앞에 = 또는 -=를 추가해야 합니다.

큐 기능을 구현하기 위해 애니메이션 그룹을 정의할 수도 있습니다.

다음 예에서는 left 속성이 250픽셀이 될 때까지

요소를 왼쪽으로 이동하는 animate() 메서드의 간단한 적용을 보여줍니다.

예제

코드 복사 코드는 다음과 같습니다.

$("button" ).click (function(){
 $("div").animate({left:'250px'});
}) 
 

9. jQuery stop() 메소드는 애니메이션이나 효과가 완료되기 전에 중지하는 데 사용됩니다.

10. 애니메이션이 100% 완료되면 콜백 함수를 호출합니다.

일반적인 구문:

코드 복사 코드는 다음과 같습니다.

$(selector ).숨기기(속도,콜백)

11.jQuery 메소드 링크

일부 요소는 한 번만 가져오면 되므로 링크를 사용하여 메소드를 추가할 수 있습니다.

메소드 포인트 방식입니다. 예를 들어

코드 복사 코드는 다음과 같습니다.

$("#p1" ).css(" 색상","빨간색").slideUp(2000).slideDown(2000);