jquery 에서 동적 효과 소결

애니메이션 효 과 를 종합 적 으로 사용 하면 간단 한 코드 를 사용 하여 jquery 의 각종 플러그 인의 효 과 를 간단하게 실현 할 수 있 습 니 다.표시(show),숨 기기(hide)와 조합(toggle)효과 1.show(speed,callback)를 이해 하 십시오.설명:이 방법 은 숨겨 진 요 소 를 표시 할 수 있 습 니 다.그 중에서 매개 변수 도 부족 합 니 다.즉,show()라 고 쓰 는 형식 speed-지정 한 디 스 플레이 속 도 는 3 개의 매개 변 수 는 slow,normal,fast 를 선택 할 수 있 고 스스로 숫자(단위:밀리초)callback-답장 수 아래 는 간단 한 예

 
var callback=function(){ //alert("      "); 
} 
var f1=function(){ 
// $("#t1").show();      
// $("#t1").show("fast",callback);      fast   
$("#t1").show(3000,callback);//        3000   
}; 
$("#b1").click(f1); 

Html 코드

 
<input type="button" value="show" id="b1"/> <div id="t1" style="display: none;border: 1px solid gray;">dd</div> 

2 hidden(speed,callback)입 니 다.설명:쇼 방법 과 달리 요 소 를 숨 기 는 데 사 용 됩 니 다.매개 변 수 는 show 와 같 습 니 다.3.1 아래 의 예 는 단 추 를 누 르 면 표시 되 는 div

 
var callback=function(){ //alert("      "); 
} 
var f1=function(){ 
// $("#t1").hide();      
// $("#t1").hide("fast",callback);      fast   
$("#t1").hide(3000,callback);//        3000   
}; $("#b1").click(f1); 

Html 코드

 
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div> 

3 toggle(speed,callback)설명 을 참고 하 십시오.이것 은 show()와 hide()방법의 결합 체 로 이해 할 수 있 습 니 다.번갈아 실행 show()와 hide()예 를 들 어 페이지 에 숨겨 진 요소 가 있 습 니 다.첫 번 째 는 toggle()을 실행 하고 요 소 를 표시 하 며 두 번 째 는 요 소 를 숨 기 고 세 번 째 는 요 소 를 표시 합 니 다.매개 변 수 는 3.1,동일

 
var callback=function(){ //alert("      "); 
} 
var f1=function(){ 
//$("#t1").toggle(); //      
//$("#t1").toggle("fast",callback); //     fast   
$("#t1").toggle(3000,callback); 
}; 
$("#b1").click(f1); 

Html 코드

 
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div> 

2.요소 의 미끄럼 효과(아래로 펼 치고 위로 수축)1.slideDown(speed,[callback]);설명:대상 의 height 를 변경 하여 아래로 펼 쳐 지 는 애니메이션 효 과 를 실현 합 니 다.숨겨 진 요소

 
var callback=function(){ //alert("      "); } 
var f1=function(){ 
//$("#t1").slideDown(); //      
//$("#t1").slideDown("fast",callback); //     fast   
$("#t1").slideDown(1000,callback); 
}; 
$("#b1").click(f1); 

Html 코드

 
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div> 

2.slideUp(speed,[callback])를 자주 표시 합 니 다.설명:대상 의 height 를 변경 하여 위로 펼 쳐 지 는 애니메이션 효 과 를 실현 합 니 다.숨겨 진 요소

 
var callback=function(){ 
//alert("      "); 
} 
var f1=function(){ 
//$("#t1").slideUp(); 
//      //$("#t1").slideUp("fast",callback); //     fast   
$("#t1").slideUp(1000,callback); 
}; 
$("#b1").click(f1); 
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div> 

3.slideToggle(speed,[callback])를 자주 사용 합 니 다.
설명:상기 두 가지 방법의 종합 체 라 고 할 수 있 으 며,toggle()을 대체 할 수 있다.만약 당신 이 위의 몇 가지 방법 소 개 를 자세히 보 았 다 면 어떻게 사용 하 는 지 알 아야 합 니 다.사실 이 몇 가지 방법의 용법 과 매개 변 수 는 모두 같 습 니 다.다만 보 여 주 는 형식 이 다 를 뿐 예 는 쓰 지 않 겠 습 니 다.
세 요소 의 페이드아웃 효과
1.fadeIn(speed,[callback]); 
설명:페이드아웃 효 과 를 구현 하여 숨겨 진 요 소 를 표시 합 니 다.
2.fadeOut(speed,[callback]);
설명:페 이 드 효 과 를 구현 하여 표 시 된 요 소 를 숨 기 는 데 사용 합 니 다.
 
3，fadeTo(speed,opactity,callback);
설명:이 방법 은 디 스 플레이 요소 의 투명 도 를 변경 하 는 데 사 용 됩 니 다.
매개 변수:speed,callback 이 위 에서 소개 한 다른 애니메이션 방법 매개 변 수 는 같 습 니 다.opactity 매개 변 수 는 투명 도 를 나타 내 고 수치 범 위 는 0-1

 
var callback=function(){ 
//alert("      "); 
} ; 
var f1=function(){ $("#t1").fadeTo(1000,0.3,callback);//0.3    30% 
}; 
$("#b1").click(f1); 
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray">dd</div> 

4 입 니 다.사용자 정의 애니메이션
 
설명:앞에서 하나,둘,셋 을 보면 요소 의 디 스 플레이 는 show,slideDown,fadeIn 이 있 고 hide,slideUp,fadeOut 의 애니메이션 효과 가 숨겨 져 있 습 니 다.
조합 효과 toggle,slideToggle,투명도 효과 fadeTo 변경,실제 필요 에 따라 애니메이션 효 과 를 사용자 정의 할 수 있 습 니 다.
 
사용자 정의 애니메이션 사용 방법:animate(params,speed,callback);
 매개 변수 설명:params-한 그룹 은 애니메이션 속성 과 최종 값 을 포함 합 니 다.스타일 속성 과 그 값 의 집합
                  speed---앞에서 소개 한 방법 중의 speed 속성
                 콜백---반전 함수
       메모:params 의 스타일 속성 은 반드시 낙타 봉 형식 으로 써 야 합 니 다.예 를 들 어 margin-left 는 마이크로 margin Left 형식 으로 써 야 합 니 다.
다음은 하나의 예

 
var callback=function(){ 
//alert("      "); 
} ; 
var par={ height:"70%" }; 
var f1=function(){ 
$("#t1").animate(par,1000,callback); 
}; 

$("#b1").click(f1); 

Html 코드

 
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray">dd</div> 

입 니 다.