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 이전

요소의 윤곽을 다른 요소로 전송합니다.