jquery (3): jquery에서의 동적 효과

jqery만 도입하면 됩니다.js, 플러그인을 도입할 필요가 없습니다. jquery가 정의한 몇 가지 기본적인 방법을 이용하여 숨김, 표시, 담금, 담금, 반투명 등을 실현할 수 있습니다.
애니메이션 효과, 만약 종합적으로 사용한다면 간단한 코드를 사용하여 jquery의 각종 플러그인의 효과를 간단하게 실현할 수 있다
본고는 이라는 책을 참고하여 정리하고 자신의 실제 경험을 결합시켜 학습 수첩으로 볼 수 있다. 편집할 때 코드가 엉망이 되었다. 다시 정리해 보니 코드 형식이 좀 엉망일 수도 있다. 양해해 주십시오. 디스플레이(show), 숨김(hide)과 조합(toggle) 효과 1.show(speed,callback);
 
 
 
설명: 이 방법은 숨겨진 요소를 표시할 수 있으며, 그 중에서 매개 변수도 부족합니다. 즉 show () 라는 형식으로 쓸 수 있습니다
speed - 디스플레이 속도를 지정하는 세 가지 인자는 슬로우,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);

 
 

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

 
 
 
2 hidden(speed,callback);
설명: 반대로 show 방법은 요소를 숨기는 데 사용되며 파라미터는 show와 같습니다. 3.1 참조
다음 예는 디스플레이를 숨기기 위해 단추를 누르는 것입니다
 
 

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

 

 

<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);


 

 

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

 

 
둘.요소의 슬라이딩 효과(아래로 확장, 위로 축소)
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);

 
 

<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>

 

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

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

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

 

 
 

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

 

 
 
 
1