jQuery-효과

jQuery는 다양한 종류의 놀라운 효과를 수행 할 수있는 간단하고 간단한 인터페이스를 제공합니다. jQuery 메서드를 사용하면 최소한의 구성으로 일반적으로 사용되는 효과를 빠르게 적용 할 수 있습니다. 이 튜토리얼은 시각 효과를 만드는 모든 중요한 jQuery 메서드를 다룹니다.

요소 표시 및 숨기기

요소를 표시하고 숨기는 명령은 우리가 예상하는 것과 거의 같습니다. show() 래핑 된 세트의 요소를 표시하고 hide() 숨길 수 있습니다.

통사론

다음은 간단한 구문입니다. show() 방법-

[selector].show( speed, [callback] );

다음은 모든 매개 변수에 대한 설명입니다.

speed − 미리 정의 된 세 가지 속도 ( "느림", "보통"또는 "빠름") 중 하나 또는 애니메이션을 실행하는 데 필요한 밀리 초 수 (예 : 1000)를 나타내는 문자열.
callback−이 선택적 매개 변수는 애니메이션이 완료 될 때마다 실행되는 기능을 나타냅니다. 애니메이션 된 각 요소에 대해 한 번씩 실행됩니다.

다음은 간단한 구문입니다. hide() 방법-

[selector].hide( speed, [callback] );

다음은 모든 매개 변수에 대한 설명입니다.

speed − 미리 정의 된 세 가지 속도 ( "느림", "보통"또는 "빠름") 중 하나 또는 애니메이션을 실행하는 데 필요한 밀리 초 수 (예 : 1000)를 나타내는 문자열.
callback−이 선택적 매개 변수는 애니메이션이 완료 될 때마다 실행되는 기능을 나타냅니다. 애니메이션 된 각 요소에 대해 한 번씩 실행됩니다.

예

작은 JQuery 코딩으로 다음 HTML 파일을 고려하십시오.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

이것은 다음 결과를 생성합니다-

요소 전환

jQuery는 요소의 표시 상태를 표시 또는 숨김간에 전환하는 방법을 제공합니다. 요소가 처음에 표시되면 숨겨집니다. 숨겨진 경우 표시됩니다.

통사론

다음은 다음 중 하나에 대한 간단한 구문입니다. toggle() 방법-

[selector]..toggle([speed][, callback]);

다음은 모든 매개 변수에 대한 설명입니다.

speed − 미리 정의 된 세 가지 속도 ( "느림", "보통"또는 "빠름") 중 하나 또는 애니메이션을 실행하는 데 필요한 밀리 초 수 (예 : 1000)를 나타내는 문자열.
callback−이 선택적 매개 변수는 애니메이션이 완료 될 때마다 실행되는 기능을 나타냅니다. 애니메이션 된 각 요소에 대해 한 번씩 실행됩니다.

예

이미지를 포함하는 간단한 <div>와 같은 모든 요소에 애니메이션을 적용 할 수 있습니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){
               $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

JQuery 효과 메서드

jQuery 효과의 기본 개념을 살펴 보았습니다. 다음 표는 다른 종류의 효과를 만드는 모든 중요한 방법을 나열합니다.

Sr. 아니.	방법 및 설명
1	animate (params, [duration, easing, callback]) 커스텀 애니메이션을 만드는 기능입니다.
2	fadeIn (속도, [콜백]) 불투명도를 조정하고 완료 후 선택적 콜백을 실행하여 일치하는 모든 요소를 페이드합니다.
삼	fadeOut (속도, [콜백]) 불투명도를 0으로 조정 한 다음 디스플레이를 "없음"으로 설정하고 완료 후 선택적 콜백을 실행하여 일치하는 모든 요소를 페이드 아웃합니다.
4	fadeTo (속도, 불투명도, 콜백) 일치하는 모든 요소의 불투명도를 지정된 불투명도로 페이드하고 완료 후 선택적 콜백을 실행합니다.
5	숨기기 () 표시되는 경우 일치하는 각 요소 세트를 숨 깁니다.
6	hide (속도, [콜백]) 우아한 애니메이션을 사용하여 일치하는 모든 요소를 숨기고 완료 후 선택적 콜백을 실행합니다.
7	보여 주다( ) 숨겨진 경우 일치하는 각 요소 세트를 표시합니다.
8	show (속도, [콜백]) 우아한 애니메이션을 사용하여 일치하는 모든 요소를 표시하고 완료 후 선택적 콜백을 실행합니다.
9	slideDown (속도, [콜백]) 높이를 조정하고 완료 후 선택적 콜백을 실행하여 일치하는 모든 요소를 표시합니다.
10	slideToggle (속도, [콜백]) 높이를 조정하고 완료 후 선택적 콜백을 실행하여 일치하는 모든 요소의 가시성을 전환합니다.
11	slideUp (속도, [콜백]) 높이를 조정하고 완료 후 선택적 콜백을 실행하여 일치하는 모든 요소를 숨 깁니다.
12	stop ([clearQueue, gotoEnd]) 지정된 모든 요소에서 현재 실행중인 모든 애니메이션을 중지합니다.
13	토글 () 일치하는 각 요소 집합 표시를 전환합니다.
14	toggle (속도, [콜백]) 우아한 애니메이션을 사용하여 일치하는 각 요소 집합을 표시하고 완료 후 선택적 콜백을 실행하도록 전환합니다.
15	토글 스위치 ) 스위치를 기반으로 일치하는 각 요소 집합 표시를 전환합니다 (true는 모든 요소를 표시하고 false는 모든 요소를 숨 깁니다).
16	jQuery.fx.off 모든 애니메이션을 전역 적으로 비활성화합니다.

UI 라이브러리 기반 효과

이러한 효과를 사용하려면 최신 jQuery UI 라이브러리를 다운로드 할 수 있습니다. jquery-ui-1.11.4.custom.zipjQuery UI 라이브러리에서 가져 오거나 Google CDN을 사용 하여 jQuery 에서 사용한 것과 유사한 방식으로 사용합니다.

우리는 jQuery UI를 사용할 수 있도록 HTML 페이지에서 다음 코드 스 니펫을 사용하여 jQuery UI에 Google CDN을 사용했습니다.

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

Sr. 아니.	방법 및 설명
1	블라인드 요소를 멀리 숨기거나 숨겨서 표시합니다.
2	되튐 요소를 수직 또는 수평으로 n 번 바운스합니다.
삼	클립 요소를 세로 또는 가로로 켜거나 끕니다.
4	하락 요소를 떨어 뜨리거나 끌어서 표시합니다.
5	터지다 요소를 여러 조각으로 분해합니다.
6	겹 종이처럼 요소를 접습니다.
7	가장 밝은 부분 정의 된 색상으로 배경을 강조합니다.
8	퍼프 스케일 및 페이드 아웃 애니메이션은 퍼프 효과를 만듭니다.
9	뛰다 요소의 불투명도를 여러 번 깜박입니다.
10	규모 백분율 요소로 요소를 축소하거나 늘립니다.
11	떨림 요소를 수직 또는 수평으로 n 번 흔 듭니다.
12	크기 지정된 너비와 높이로 요소의 크기를 조정합니다.
13	미끄러지 다 요소를 뷰포트 밖으로 밀어냅니다.
14	이전 요소의 윤곽을 다른 요소로 전송합니다.