jquery_jquery의 동적 효과 요약
- WBOY원래의
- 2016-05-16 18:13:38965검색
애니메이션 효과를 종합적으로 활용하면 간단한 코드를 사용하여 다양한 jquery 플러그인의 효과를 간단하게 구현할 수도 있습니다
이 글은 "A Brief Talk on jquery"라는 책을 참고하여 정리한 것입니다. , 그리고 제 현실과 결합시켜서 만든 것인데 학습 매뉴얼이라고 볼 수 있습니다
코드를 편집하다보니 다 엉망이 되어버렸네요. 아직 코드 형식이 좀 지저분한 점 양해 부탁드립니다.
표시, 숨기기 및 조합(토글) 효과
1.show(speed,callback);
설명: 이 방법은 숨겨진 요소를 표시할 수 있으며 매개변수도 기본값입니다. 즉, 형식으로 작성됩니다. of show()
speed --- 표시 속도를 지정하는 3가지 매개변수가 있습니다. 느림, 보통, 빠름을 선택하거나 직접 숫자를 지정할 수 있습니다(단위: 밀리초)
콜백---콜백 함수
다음은 간단한 예시입니다
var callback=function(){ //alert("나는 콜백 함수입니다.") ;
}
var f1=function(){
// $("#t1").show( ); 매개변수 기본값
// $("#t1").show( "fast",callback); 표시 속도는 빠른 모드입니다
$("#t1").show(3000,callback); //표시 속도 3000밀리초
};
$("# b1").click(f1)
Html 코드
dd
숨김(속도,콜백)
참고: 요소를 숨기는 데 사용되는 표시 방법과 달리 매개변수는 표시와 동일합니다. 3.1을 참조하세요.
다음 예는 버튼을 클릭하여 표시된 div를 숨기는 것입니다
var callback=function(){ //alert("내가 콜백입니다 function");
}
var f1=function(){
// $("#t1").hide() ; 매개변수 기본값
// $("#t1"). hide("fast",callback); 표시 속도는 빠른 모드입니다
$("#t1").hide(3000,callback);/ /사용자 지정 표시 속도 3000밀리초
}; ).click(f1);
HTML 코드
3ggle(speed,callback)
설명: show()와 hide() 메소드로 이해하면 show()와 hide()를 번갈아 실행합니다. 🎜>예를 들어 페이지에 숨겨진 요소가 있는데 처음에는ggle()이 실행되면 해당 요소가 표시되고 두 번째 실행에서는 해당 요소가 숨겨지고 세 번째에는 해당 요소가 다시 표시됩니다. . .
매개변수는 3.1과 동일
}
var f1=function(){
//$("#t1").toggle( ); // 매개변수 누락 Save
//$("#t1").toggle("fast",callback) //빠른 모드에서 속도 표시
$("#t1").toggle(3000 ,콜백)
$("#b1").click(f1)
HTML 코드
2. 위쪽으로)
1 .slideDown(speed,[callback]) 설명: 숨겨진 요소를 표시하는 데 일반적으로 사용되는 아래쪽 확장 애니메이션 효과를 얻기 위해 개체의 높이를 변경합니다.
//$("#t1"). SlideDown("fast",callback); //빠른 모드의 속도 표시
$("#t1").slideDown(1000,callback)
$("#b1"); click(f1);
HTML 코드
코드 복사
2.slideUp(speed,[callback]);)
설명: 개체의 높이를 변경하여 위쪽으로 확장되는 애니메이션 효과를 얻습니다. 일반적으로 숨기기 위해 사용됩니다. 표시된 요소
var callback=function(){
//alert ("나는 콜백 함수입니다");
}
var f1=function(){
//$("#t1").slideUp()
//기본 매개변수// $("#t1").slideUp("fast",callback); //표시 속도는 빠른 모드입니다
$("#t1").slideUp(1000,callback); 🎜>};
$("#b1").click(f1)
t1" style="border: 1px solid grey;">dd
3.slideToggle(speed,[callback]););
설명: 위의 두 메소드를 종합한 것이라고 할 수 있는데, 이는 위 메소드의 소개를 잘 읽어보신 분이라면 토글()을 어떻게 사용하는지 아셔야 할 것입니다. 사실 이 방법들은 사용법과 매개변수는 동일하지만 표시 형식은 다릅니다
3가지 요소의 페이드 인 및 아웃 효과
1.fadeIn(속도,[콜백])
설명: 숨겨진 요소를 표시하는 데 사용되는 페이드 아웃 효과 구현
2.fadeOut(속도,[콜백]);
설명: 표시된 요소를 숨기는 데 사용되는 페이드인 효과 구현
3, fadeTo(속도, 불투명도, 콜백);
설명: 이 메소드는 표시된 요소의 투명도를 변경하는 데 사용됩니다.
매개변수: 속도, 콜백은 위에서 소개한 다른 애니메이션 방법과 동일한 매개변수를 갖습니다.opactity 매개변수는 투명도를 나타내며 값 범위는 0~1입니다.
/ /alert("나는 콜백 함수입니다");
var f1=function(){ $("#t1").fadeTo(1000,0.3,callback);//0.3은 30% 투명도입니다.
}; $("#b1").click(f1)
"t1" style=" border: 1px solid grey">dd
맞춤 애니메이션
참고: 이전 1, 2, 3에서 볼 수 있듯이 요소 표시에는 show, SlideDown, fadeIn과 hide, SlideUp 및 fadeOut의 숨겨진 애니메이션 효과가 포함됩니다
, 효과 토글 결합, 슬라이드 토글, 투명 효과 변경 fadeTo, 필요한 경우 일부 애니메이션 효과를 사용자 정의할 수도 있습니다
맞춤 애니메이션 사용 방법: animate(params,speed,callback);
매개변수 설명: params---스타일 속성 집합과 애니메이션 속성 및 최종 값으로서의 해당 값
speed----앞서 소개한 메소드의 speed 속성과 동일
콜백---콜백 함수
참고: params의 스타일 속성은 카멜 표기법으로 작성해야 합니다. 즉, margin-left는 marginLeft보다 약간 작아야 합니다.
다음은 예시입니다
코드 복사
};
$("#b1").click(f1);
HTML 코드