jQuery 효과 사용법-JS 튜토리얼-php.cn

jQuery 효과 사용법

黄舟

풀어 주다： 2016-12-15 15:02:35

원래의

1044명이 탐색했습니다.

.hide()
일치하는 요소를 숨깁니다.
　.hide()
　이 메서드는 어떤 매개변수도 허용하지 않습니다.
.hide([duration][,complete])
기간
애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
Complete
애니메이션이 종료되면 실행되는 함수입니다.
.hide([duration][,easing][,complete])
Duration
애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
　easing
　전환에 사용할 easing 함수를 나타내는 문자열입니다.
　완료
　 애니메이션이 완료되면 실행되는 함수입니다.
사용법:
$('button').click(function(){
$('p').hide(2000)
}) .click(function(){
　　　$(this).hide(2000,function(){
　　　$(this).remove()
　　　})
　　})　

.show()
일치하는 요소를 표시합니다.
　.show()
　이 메소드는 어떤 매개변수도 허용하지 않습니다.
　.show([duration][,complete])
　duration
　애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
Complete
애니메이션이 종료되면 실행되는 함수입니다.
　.show([duration][,easing][,complete])
　duration
　　애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
　easing
　전환에 사용할 easing 함수를 나타내는 문자열입니다.
　완료
　 애니메이션이 완료되면 실행되는 함수입니다.
사용법:
$("button").click(function () {
$("div").first().show("fast", function showNext() {
　　$ (this).next("div").show("fast", showNext);
　　} );

.toggle()
일치하는 요소를 표시하거나 숨깁니다.

　.toggle()

　이 메소드는 어떤 매개변수도 허용하지 않습니다.
.toggle([duration][,complete])
Duration
애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
Complete
애니메이션이 종료되면 실행되는 함수입니다.
.toggle([duration][,easing][,complete])
Duration
애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
　easing
　전환에 사용할 easing 함수를 나타내는 문자열입니다.
　완료
　 애니메이션이 완료되면 실행되는 함수입니다.
사용법:
$("버튼").click(function () {
버튼").click(function () {
　　　$("p").toggle("slow") ;
　　});

.animate()

　에 따르면 맞춤 애니메이션을 수행하는 CSS 속성 집합입니다.

　.animate(PRoperties[,duration][,easing][,complete])
　properties
　　CSS 속성 및 값의 개체로, 애니메이션은 이 개체 집합에 따라 움직입니다.

기간(기본값: 400)

애니메이션이 실행되는 기간을 결정하는 문자열 또는 숫자입니다.
easing(기본 스윙)
어떤 easing 기능이 과도하게 사용되었는지 나타내는 문자열입니다.
Complete
애니메이션이 종료되면 실행되는 함수입니다.
　.animate(properties,options)
　properties
　　　CSS 속성 및 값의 개체로, 이 개체 집합에 따라 애니메이션이 움직입니다.
옵션
애니메이션 옵션이 포함된 값의 모음입니다.
사용법:
$("#go").click(function(){
$("#block").animate({
width: "70%",
불투명도 : 0.4,
　　　marginLeft: "0.6in",
　　fontSize: "3em",
　　　borderWidth: "10px"
　　}, 1500 );
　}); # right").click(function(){
　　$(".block").animate({"left": "+=50px"}, "slow");
　　});
적용 500밀리초 동안 왼쪽 속성이 50이 되고 투명도가 1(즉, 불투명, 표시)이 되도록 모든 단락에 애니메이션을 적용합니다.
　$( "p" ).animate({
　　왼쪽: 50, 불투명도: 1
　　}, 500 );

.delay()
지연을 설정하여 대기열의 후속 항목 실행을 지연시킵니다.
　.delay(duration[,queueName])
　　duration
　　다음 대기열 실행을 지연하는 시간을 설정하는 데 사용되는 밀리초 수를 나타내는 정수입니다.
　queueName
　　큐 이름 역할을 하는 문자열입니다.
효과:

의 .slideUp() 및 .fadeIn() 애니메이션 사이에 800밀리초 지연을 설정할 수 있습니다:
$('#foo' ). SlideUp(300).delay(800).fadeIn(400);

두 개의 div를 숨겼다가 표시합니다. 녹색 div가 표시되기까지 800밀리초의 지연이 있습니다.
　$("버튼").click(function() {
　　　　$("div.first").slideUp(300).delay(800).fadeIn(400);
　　.second") .slideUp(300).fadeIn(400);
　});

.stop()
　 현재 실행 중인 일치 요소의 애니메이션을 중지합니다.
.stop([clearQueue][,jumpToEnd])
clearQueue
대기열 애니메이션을 취소할지 여부를 나타내는 부울 값, 기본값은 false입니다.
jumpToEnd
현재 애니메이션은 즉시 완료됩니다. 기본값 false;
　.stop([queue] [,clearQueue] [, jumpToEnd ] )
　　queue
　　　　 애니메이션 중지 대기열의 이름입니다.
　　clearQueue
　　대기 중인 애니메이션을 취소할지 여부를 나타내는 부울 값입니다. 기본값은 false입니다.
　　　jumpToEnd
　　현재 애니메이션이 즉시 완료되는지 여부를 나타내는 부울 값입니다. 기본값은 false입니다.
사용법:
$("#stop").click(function(){
이 작업 중에 애니메이션을 즉시 중지합니다.

.fadeIn()
페이드 인하여 일치하는 요소를 표시합니다.
　.fadeIn([duration][,complete])
　duration(기본값: 400)
　　애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
　complete
　 애니메이션이 완료되면 실행되는 함수입니다.
.fadeIn(options)
애니메이션 옵션이 포함된 값의 모음입니다.
.fadeIn([duration][,easing][,complete])
기간(기본값: 400)
애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
easing (기본값: Swing)
전환에 사용할 easing 함수를 나타내는 문자열
Complete
애니메이션이 완료되면 실행되는 함수입니다.
사용법:
$(".btn2").click(function(){
>.fadeOut()
페이드 아웃하여 일치하는 요소를 숨깁니다.
.fadeOut([duration][,complete])

Duration(기본값: 400)

애니메이션이 실행되는 시간을 결정하는 문자열 또는 숫자입니다.
　complete
　 애니메이션이 완료되면 실행되는 함수입니다.
.fadeOut(options)
애니메이션 옵션이 포함된 값의 모음입니다.
.fadeOut([duration][,easing][,complete])
기간(기본값: 400)
애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
easing (기본값: Swing)
전환에 사용할 easing 함수를 나타내는 문자열
Complete
애니메이션이 완료되면 실행되는 함수입니다.
사용법:
$(".btn2").click(function(){

.fadeTo()
일치하는 요소의 투명도를 조정합니다.
　.fadeTo(duration,opacity[,complete])
　duration
　　애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
　opacity
　　대상 요소의 불투명도를 나타내는 0~1 사이의 숫자
　　complete
　 애니메이션이 완료되면 실행되는 함수입니다.
　.fadeTo(duration,opacity[,easing][,complete])
　　duration
　　애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
불투명도
대상 요소의 불투명도를 나타내는 0에서 1 사이의 숫자
easing
전환에 사용할 easing 함수를 나타내는 문자열
완료
애니메이션이 완료될 때 실행하는 함수.
사용법:
$('input').click(function(){
#div1').css("display","none");
　　　　　})
　　　})

.fadeToggle()
　 요소의 불투명도 애니메이션을 일치시켜 표시하거나 숨깁니다.
　.fadeToggle([duration][,easing][,complete])
　　duration(기본값: 400)
　　　애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
easing (기본값: Swing)
전환에 사용할 easing 함수를 나타내는 문자열
Complete
애니메이션이 완료되면 실행되는 함수입니다.
　.fadeToggle(opacity)
　opacity
　 애니메이션 옵션이 포함된 값의 모음입니다.
사용법:
$("input").click(function(){
.slideDown()
슬라이딩 애니메이션을 사용하여 일치하는 요소를 표시합니다.
　.slideDown([duration][,complete])

　　duration

　　애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
　　complete
　　 애니메이션이 완료되면 실행되는 함수입니다.
　.slideDown(opacity)
　opacity
애니메이션 옵션이 포함된 값의 모음입니다.
　.slideDown([duration][,easing][,complete])
　　duration
　　애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
　　easing
　　어떤 easing 함수가 과도하게 사용되는지 나타내는 문자열입니다.
　　complete
　　 애니메이션이 완료되면 실행되는 함수입니다.
사용법:
$("input").click(function(){
.slideUp()
슬라이딩 애니메이션을 사용하여 일치하는 요소를 숨깁니다.
.slideUp([duration][,complete])
Duration
애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
　완료
　 애니메이션이 완료되면 실행되는 함수입니다.

　.slideUp(opacity)

　opacity
　 애니메이션 옵션이 포함된 값의 모음입니다.
.slideUp([duration][,easing][,complete])
Duration
애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
　easing
　어떤 easing 기능이 과도하게 사용되고 있는지 나타내는 문자열입니다.
　완료
　 애니메이션이 완료되면 실행되는 함수입니다.
사용법:
$("input").click(function(){
.slideToggle()
슬라이딩 애니메이션을 사용하여 일치하는 요소를 표시하거나 숨깁니다.
.slideToggle([duration][,complete])
Duration
애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
　완료
　 애니메이션이 완료되면 실행되는 함수입니다.
.slideToggle(opacity)
opacity
애니메이션 옵션이 포함된 값의 모음입니다.
.slideToggle([duration][,easing][,complete])

Duration

애니메이션 실행 시간을 결정하는 문자열 또는 숫자입니다.
　easing
　어떤 easing 함수가 과도하게 사용되고 있는지 나타내는 문자열입니다.
　완료
　 애니메이션이 완료되면 실행되는 함수입니다.
효과:
$("input").click(function(){
$('#div1').slideToggle(2000)
})

위는 jQuery 효과를 활용한 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!