> 웹 프론트엔드 > JS 튜토리얼 > jQuery 효과 사용법

jQuery 효과 사용법

黄舟
풀어 주다: 2016-12-15 15:02:35
원래의
1081명이 탐색했습니다.

.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 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿