지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > jquery_jquery의 동적 효과 요약

jquery_jquery의 동적 효과 요약

WBOY
풀어 주다： 2016-05-16 18:13:38
원래의
1026명이 탐색했습니다.

애니메이션 효과를 종합적으로 활용하면 간단한 코드를 사용하여 다양한 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 코드
코드 복사 코드는 다음과 같습니다.

dd


3ggle(speed,callback)
설명: show()와 hide() 메소드로 이해하면 show()와 hide()를 번갈아 실행합니다. 🎜>예를 들어 페이지에 숨겨진 요소가 있는데 처음에는ggle()이 실행되면 해당 요소가 표시되고 두 번째 실행에서는 해당 요소가 숨겨지고 세 번째에는 해당 요소가 다시 표시됩니다. . .
매개변수는 3.1과 동일

코드 복사 코드는 다음과 같습니다.
var callback=function (){ //alert("나는 콜백 함수입니다");
}
var f1=function(){
//$("#t1").toggle( ); // 매개변수 누락 Save
//$("#t1").toggle("fast",callback) //빠른 모드에서 속도 표시
$("#t1").toggle(3000 ,콜백)
$("#b1").click(f1)



HTML 코드


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


2. 위쪽으로)

1 .slideDown(speed,[callback]) 설명: 숨겨진 요소를 표시하는 데 일반적으로 사용되는 아래쪽 확장 애니메이션 효과를 얻기 위해 개체의 높이를 변경합니다.


코드 복사 코드는 다음과 같습니다. var callback=function(){ //alert("나는 콜백 함수"); }
var f1=function( ){
//$("#t1").slideDown(); // 매개변수 기본값
//$("#t1"). SlideDown("fast",callback); //빠른 모드의 속도 표시
$("#t1").slideDown(1000,callback)
$("#b1"); click(f1);


HTML 코드



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

dd

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입니다.

코드 복사 코드는 다음과 같습니다.
var callback=function(){
/ /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보다 약간 작아야 합니다.

다음은 예시입니다

코드 복사

코드는 다음과 같습니다 var callback =function(){ //alert("나는 콜백 함수입니다.") }
var par={ height: "70%" }; f1=function(){
$("#t1").animate(par,1000,callback)
};

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


HTML 코드



코드 복사

코드는 다음과 같습니다.
dd

관련 라벨：
动态效果
원천：php.cn
이전 기사：Jquery 대체 행 색상 변경, 모바일 색상 변경, 클릭 색상 변경을 기반으로 한 테이블 Plug-in_jquery 다음 기사：jQuery 연구 노트 DOM 객체 및 jQuery object_jquery
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
Javafx에서 인라인 CSS 스타일을 동적으로 수정합니다. 응용프로그램이 최대화되었을 때 창의 배경 이미지를 변경하려고 합니다. 내 배경은 인라인 CSS를 사용하여 설정됩니다. 스타일에 대해 두 개의 다른 변수와 if 문...
에서 2024-04-06 20:57:16
0
1
487
3단계 계층구조의 맞춤 분류를 사용하여 우커머스 관련 상품을 선택하세요. 나는 "스포츠"라는 사용자 정의 분류를 가진 wooCommerce 상점을 가지고 있습니다. 분류에는 부모, 어린이, 어린이의 세 가지 수준이 있...
에서 2024-04-06 20:05:30
0
1
544
opentbs를 사용하여 odt 파일을 생성할 때 발생하는 문제: 동일한 키의 값이 별도의 열이 아닌 동일한 행에 표시됩니다. PHP를 사용하여 odt를 만들기 위해 OpenTbs라는 라이브러리를 사용하고 있는데, 열과 행이 동적으로 생성되기 때문에 사용하고 있습니다. 행과 열을 만드는 ...
에서 2024-04-06 20:18:18
0
1
483
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿