《날카로운 jQuery》 요점 귀납 (3) jQuery의 이벤트와 애니메이션 (아래: 애니메이션 편)
22627 단어 jquery
2. 애니메이션
1 show () 방법 및 hide () 방법
$("selector").디스플레이: none에서 기본 디스플레이 속성 $("selector") 을 복원합니다.hide () 요소의 디스플레이 스타일을 none으로 설정합니다. $("selector") 와 같습니다.css("display", "none")(참고: 매개 변수를 입력한 후,.show()와.hide () 방법은 원소의 width,height와 투명 속성을 동시에 애니메이션한다.입력 매개 변수는 밀리초 단위의 은밀한 속도를 제어합니다. 예를 들어.show(600),fast,normal,slow,fast는 200밀리초,normal은 400밀리초,slow는 600밀리초)
2 fadeIn () 방법 및 fadeOut () 방법
$("selector").fadeIn () 은 투명도를 지정한 시간 안에 디스플레이: none에서 $("selector") 로 높입니다.fadeOut () 투명도를 지정한 시간 안에 디스플레이:none으로 낮추기;
3 slideUp () 방법 및 slideDown () 방법
$("selector").slideUp () 제어 요소의 높이가 지정된 시간 내에 아래에서 위로 디스플레이:none; $("selector").slideDown() 제어 요소의 높이가 지정된 시간 내에 display:none에서 전체 높이로 확장됩니다.
4 사용자 정의 애니메이션 방법 animate()
$("selector").animate(params,speed,callback);params: 스타일 속성과 값을 포함하는 맵입니다. 예를 들어 {property1: "value1",property2: "value2",.....}speed: 속도 매개 변수, 선택 가능callback: 애니메이션이 완성될 때 실행하는 매개 변수(즉 리셋 함수), 선택 가능
일반적인 애니메이션 예
<
script
>
//
$(
function
(){
$(
"
selector
"
).click(
function
(){
$(
this
).animate({left:
"
500px
"
},
3000
);
//
selector 3 500px
});
})
</
script
>
<
script
>
//
、
$(
function
(){
$(
"
selector
"
).click(
function
(){
$(
this
).animate({left:
"
+=500px
"
},
3000
);
//
click ， 500px
});
})
</
script
>
<
script
>
//
$(
function
(){
$(
"
selector
"
).click(
function
(){
$(
this
).animate({left:
"
500px
"
,top:
"
300px
",height
:"
+=100px"
},
3000
);
//
30 ，
});
})
</
script
>
<
script
>
//
$(
function
(){
$(
"
selector
"
).click(
function
(){
$(
this
).animate({left:
"
500px
"
},
3000
).animate({top:
"
300px
"
},
3000
);
//
});
})
</
script
>
5 애니메이션 콜백 함수
css () 방법이 애니메이션 대기열에 들어가지 않기 때문에 바로 실행됩니다.애니메이션 마지막에 selector의 css를 변경하려면 리셋 함수 예를 사용해야 합니다.
<
script
>
$(
"
selector
"
).click(
function
(){
$(
this
).animate({property1:
"
value1
"
},time).animate({property2:
"
value2
"
},time,
function
(){
$(
this
).css(
"
property3
"
,
"
value3
"
);
//
css()
});
})
</
script
>
(참고: 애니메이션 콜백 함수는 jQuery의 모든 애니메이션 효과 방법에 적용됨)
6 애니메이션 중지 및 애니메이션 상태 판단
$("selector").stop () 는 현재 애니메이션을 종료합니다. 대기열에 다음 애니메이션이 존재하면 다음 애니메이션을 즉시 실행합니다. 형식 $("selector")stop([clearQueue][,gotoEnd])
애니메이션을 전환하는 예:
<
script
>
$(
"
selector
"
).hover(
function
(){
$(
this
).stop().animate();
},
function
(){
$(
this
).stop().animate();
})
</
script
>
clearQueue 매개 변수가true로 설정되면 현재 요소의 다음에 실행되지 않은 애니메이션 대기열 예가 비워집니다.
<
script
>
$(
"
selector
"
).hover(
function
(){
$(
this
).stop(
true
).animate().animate()
//
， ，
},
function
(){
$(
this
).stop(
true
).animate().animate()
})
</
script
>
gotoEnd 매개 변수가true로 설정되었을 때 실행 중인 애니메이션을 종료 시간에 직접 도달할 수 있습니다
is(":animated")는 요소가 애니메이션 상태인지 여부를 판단하여 애니메이션 누적 예를 방지합니다.
<
script
>
if
(
!
$(
"
selector
"
).is(
"
:animated
"
)){
//
//
，
}
</
script
>
7 기타 애니메이션 방법
상호작용에 전문적으로 사용되는 애니메이션 방법 3개:toggle(speed, [callback]);slideToggle(speed,[callback]); fadeTo(speed,opacity,[callback])
$("selector").toggle () 는 원소의 보이는 상태를 전환합니다. 원소가 숨겨지면 보이는 상태로 전환하고, 반대로도 마찬가지입니다.
$("selector").slideToggle()은 높이 변화를 통해 요소의 가시성을 전환합니다.
$("selector").fadeTo () 는 원소의 불투명도를 $("selector"와 같은 지정한 값으로 점진적으로 조정합니다.fadeTo(600,0.2);컨텐츠를 투명도 20%로 600ms 속도 조정
8 애니메이션 방법 요약
toggle () 은 hide () 와 show () slideToggle () 을 대체하고, slideUp () 과 slideDown () animate () 는 모든 애니메이션 방법을 대체합니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
