Jquery의 애니메이션에 대한 예제 튜토리얼

jQuery animation

1. 왼쪽 상단의 확대/축소 효과

hide([speed,[fn]])

　 개요: 표시된 요소 숨기기

매개변수: speed: 미리 결정된 세 가지 속도 중 하나의 문자열(" 느림 ","보통" 또는 "빠름") 또는 애니메이션 지속 시간을 나타내는 밀리초 값(예: 1000)

　　 fn: 애니메이션이 완료되면 실행되는 함수로, 각 요소에 대해 한 번씩 실행됩니다.

// $(":button[value=hide]").click(function(){
// $("div").hide(2000,function(){
// Alert("div가 숨겨져 있습니다. ");
// });
// })

show([speed,[fn]])

　 개요: 숨겨진 일치 요소를 표시합니다.

// $(":button[value=show]").click(function(){
// $("div").show(2000,function(){
// Alert("div가 표시됩니다 ");
// });
// })

toggle([speed],[fn])

　개요: 요소가 표시되면 숨김으로 전환하고 요소가 숨겨져 있으면 표시로 전환 .

// //toggle([speed],[fn]) 요소가 표시되면 숨김으로 전환하고 요소가 숨겨져 있으면 표시로 전환
// $(":button[value=hidden) ]" ).click(function(){
// $("div").toggle(2000);
// })

2. 상하 스케일링 효과

slideUp(speed, [callback ] )

　개요: 높이 변경(위로 감소)을 통해 일치하는 모든 요소를 ​​동적으로 숨기고 선택적으로 숨기기가 완료된 후 콜백 함수를 트리거합니다.

　 매개변수: speed 미리 결정된 세 가지 속도("느림", "보통" 또는 "빠름") 중 하나의 문자열 또는 애니메이션 기간(예: 1000)을 나타내는 밀리초 값 애니메이션이 실행될 때 실행되는 콜백(선택 사항) 완료

//slideUp(speed, [fn]) 함수는 높이 변경(위로 감소)을 통해 일치하는 모든 요소를 ​​동적으로 숨기고 선택적으로 숨기기가 완료된 후 콜백 함수를 트리거합니다.
// $(":button [value=hide] ").click(function(){
// $("div").slideUp(2000);
// })

slideDown(speed, [callback])

　개요: 높이 변화에 따라(아래로 증가) 일치하는 모든 요소를 ​​동적으로 표시하고 표시가 완료된 후 선택적으로 콜백 함수를 트리거합니다.

// //slideDown(speed, [fn])은 높이 변경(아래로 증가)을 통해 일치하는 모든 요소를 ​​동적으로 표시하고 선택적으로 표시가 완료된 후 콜백 함수를 트리거합니다.   $(": 버튼[값=표시 ]").click(function(){
// $("div").slideDown(2000);
// })

slideToggle([speed],[fn])

　 개요: 모든 항목의 가시성을 전환합니다. 높이 변경을 통해 요소를 일치시키고 토글이 완료되면 선택적으로 콜백 함수를 트리거합니다.

//slideToggle([speed],[fn]) 높이 변경을 통해 일치하는 모든 요소의 표시 여부를 전환하고 선택적으로 전환이 완료된 후 콜백 함수를 트리거합니다

//             $(":button[value=hidden Display] ").click(function(){
// $("div").slideToggle(2000);
// })

3. 페이드 효과(불투명도 변경)

fadeOut(속도, [콜백])

　개요: 불투명도 변경을 통해 일치하는 모든 요소의 페이드 아웃 효과를 얻고 선택적으로 애니메이션이 완료된 후 콜백 기능을 트리거합니다.

// $(":button[value=hide]").click(function(){

// $("div").fadeOut(2000);
// })

fadeIn(speed, [ callback])

　개요: 불투명도 변경을 통해 일치하는 모든 요소의 페이드인 효과를 얻고 선택적으로 애니메이션이 완료된 후 콜백 기능을 트리거합니다.

$(":button[값=표시]").click(function(){

// $("div").fadeIn(2000);
// })

fadeToggle([speed,[fn ]])

　개요: 불투명도 변경을 통해 일치하는 모든 요소의 페이드 인 및 페이드 아웃 효과를 전환하고 선택적으로 애니메이션이 완료된 후 콜백 기능을 트리거합니다.

$(":button[value=hidden]").click(function(){

// $("div").fadeToggle(2000);
// })

fadeTo(speed,opacity, [ fn])

　개요: 일치하는 모든 요소의 불투명도를 지정된 불투명도로 점진적으로 조정하고 선택적으로 애니메이션이 완료된 후 콜백 함수를 트리거합니다.

// $(":button[value=hide]").click(function(){

// $("div").fadeTo(2000,0.5);
// })

4. 맞춤 애니메이션

animate(params,[speed],[fn])

　개요: 맞춤 애니메이션을 만드는 데 사용되는 기능입니다.

//                $("div").animate({"left":"1000px"},2000);

stop([clearQueue], [gotoEnd])

　 개요: 지정된 요소의 모든 것을 중지합니다. 애니메이션을 실행 중입니다.

　 매개 변수:clearQueue(선택 사항) true로 설정하면 대기열이 지워집니다. 애니메이션을 즉시 종료할 수 있습니다. (GOTOEND(선택 사항)를 사용하면 현재 실행 중인 애니메이션을 즉시 완료할 수 있습니다.

// $(document).click(function(){

// $("div").stop()

// })

지연(기간)

　개요: 대기열의 후속 항목 실행을 연기하도록 지연을 설정합니다.

　 매개변수 지속 시간 지연 시간, 단위: 밀리초

// $("div").delay(2000).animate({"left":"1000px"},2000);

위 내용은 Jquery의 애니메이션에 대한 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!