jquery가 알아야 할 몇 가지 일반적인 특수 효과 방법 및 사용 예(구성)

jquery가 알아야 할 몇 가지 일반적인 특수 효과 방법 및 사용 예(구성)_jquery

WBOY

풀어 주다： 2016-05-16 17:31:47

원래의

1057명이 탐색했습니다.

1.jQuery fadeIn()은 숨겨진 요소를 페이드 인하는 데 사용됩니다.
구문:
$(selector).fadeIn(speed,callback);
예:

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

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

2.jQuery fadeOut() 메서드는 보이는 요소를 페이드 아웃하는 데 사용됩니다.
구문:
$(selector).fadeOut(speed,callback);

3.jQuery fadeToggle() 메서드는 fadeIn()과 fadeOut() 메서드 간에 전환할 수 있습니다.
fadeToggle()은 이미 페이드 아웃된 요소에 페이드 인 효과를 추가합니다.
요소가 이미 페이드 인된 경우 fadeToggle()은 요소에 페이드 아웃 효과를 추가합니다.
구문:
$(selector).fadeToggle(speed,callback);
예:

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

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

여기서 나는 일반적으로 jquery가 다음의 합성을 달성하기 위한 부정 및 가역적 방법을 가지고 있다고 말하고 싶습니다. 단일 방법. 아래의 위아래로 움직이는 것도 마찬가지입니다.

4. 구문:
$(selector).fadeTo(speed,opacity,callback)
필수 속도 매개변수는 효과 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.
fadeTo() 메서드의 필수 불투명도 매개변수는 페이드 효과를 지정된 불투명도(0에서 1 사이의 값)로 설정합니다. 예시

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

 
$("button").click (function( ){ 
$("#div1").fadeTo("slow",0.15); 
$("#div2").fadeTo("slow",0.4); 
$( "#div3 ").fadeTo("slow",0.7); 
}); 

5.jQuery SlideDown() 메서드는 요소를 아래로 슬라이드하는 데 사용됩니다.
구문:
$(selector).slideDown(speed,callback)
$("#flip").click(function(){ $("#panel").slideDown();} );

6.jQuery의 SlideUp() 메소드는 요소를 위로 슬라이드하는 데 사용됩니다.
구문:
$(selector).slideUp(speed,callback)
선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.
선택적 콜백 매개변수는 슬라이딩이 완료된 후 실행될 함수의 이름입니다.

7. jQuery SlideToggle() 메서드는 SlideDown() 및 SlideUp() 메서드 간에 전환할 수 있습니다.
요소가 아래로 슬라이드되면 SlideToggle()이 요소를 위로 슬라이드합니다.
요소가 위로 슬라이드되면 SlideToggle()이 요소를 아래로 슬라이드합니다.
$(selector).slideToggle(speed,callback);

8. jQuery animate() 메서드는 사용자 정의 애니메이션을 만드는 데 사용됩니다.
구문:
$(selector).animate({params},speed,callback)
필수 params 매개변수는 애니메이션을 구성하는 CSS 속성을 정의합니다.
선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.
선택적 콜백 매개변수는 애니메이션이 완료된 후 실행될 함수의 이름입니다.
상대값을 정의하는 것도 가능합니다(값은 요소의 현재 값을 기준으로 합니다). 값 앞에 = 또는 -=를 추가해야 합니다.
큐 기능을 구현하기 위해 애니메이션 그룹을 정의할 수도 있습니다.
다음 예에서는 왼쪽 속성이 250픽셀이 될 때까지

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

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

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

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

10. 애니메이션이 100% 완료되면 콜백 함수가 호출됩니다.
일반적인 구문:
$(selector).hide(speed,callback)

11.jQuery 메서드 링크
일부 요소는 한 번만 가져오면 되므로 링크를 사용하여 다음 작업을 수행할 수 있습니다. 메소드를 추가하십시오.
메소드 포인트 방식입니다.
$("#p1").css("color","red").slideUp(2000).slideDown(2000);