jQuery 연구 노트 jQuery animation_jquery

1. 시스템 사전 정의 애니메이션 기능

1. 표시 및 숨기기 기능
show() //요소 표시(너비, 높이, 불투명도 동시 증가)
hide (); //요소 숨기기
인터페이스 요소를 숨기려면 hide()를 실행합니다. 이는 CSS 스타일의 display:none과 동일합니다.

다음과 같이 함수에 매개변수를 추가할 수도 있습니다. 다음은 다음과 같습니다.
show("slow");
slow 값 외에도 각각 600, 400, 200밀리초의 시간을 나타내는 Normal 및 Fast로 설정할 수도 있습니다.

특정 시간 값을 추가할 수도 있습니다.

slow(1000);
요소가 완전히 표시되는 시간 간격을 1000밀리초로 나타냅니다

2. ;// 요소를 점차적으로 표시합니다(불투명도만 높입니다)
fadeOut(); // 요소를 점차적으로 페이드합니다.

3. 높이 및 너비 함수
slideDown(); 요소의 높이 (요소 높이만 증가)
slideUp(); // 요소의 높이를 점차적으로 줄임


2. 사용자 정의 애니메이션 기능
animate(params,speed,callback);
params: 값은 스타일 속성과 값 사이의 매핑입니다
speed: speed
callback: 애니메이션이 완료될 때 실행 함수

params의 style 속성 값은 여러 속성일 수 있고, 누적 증가 및 감소 값일 수도 있습니다
예:

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

$(function(){
$(#id1).click(function(){
$(this). animate({left:" =500px",height:"200px"}, 3000,function(){
$(this).css("border","5px solid blue")
})
})
})

1. 요소 애니메이션 중지
stop()
현재 실행 중인 애니메이션을 종료하고 아래에 정의된 애니메이션을 즉시 실행합니다.

2. 애니메이션 상태인지 확인
is(" :animate")

3. 기타 애니메이션 기능
toggle(speed,callback);//요소 상태 전환(높이) , 너비, 불투명도) 즉시, 숨겨진 경우 표시로 전환, 표시되는 경우 숨김 전환
sildeToggle(speed,callback);//요소 상태를 전환하도록 높이 모드 변경
fadeto(speed,opacity,callback);전환 지정된 불투명도 값으로