오봉이와 함께하는 개발 블로그

jQuery - 효과 본문

FE/jQuery

jQuery - 효과

오봉봉이 2021. 12. 15. 15:05
728x90

jQuery 효과

  • 공통 인수
    • duration : 효과 진행 속도(slow / normal / fast)
    • callback : 효과 완료 후 수행할 함수
    • easing : 전체 애니메이션(효과)의 적용 시간 비율을 원하는 진행 비율로 매핑
      • swing : sin곡선(느리게 시작해서 중간에 빠르게 진행되다가 나중에 다시 느려지는 효과)
      • linear : 선형 곡선(시작부터 끝까지 일정한 속도)
  • jQuery로 가능한 시각적 효과
    • Basic 효과
      • hide() : 요소 숨기기
      • show() : 요소 표시(출력)
      • toggle() : 요소를 숨기거나 표시 (hide() / show() 교대로 실행)
    • Sliding 효과
      • slideDown() : 요소를 슬라이딩 효과로 나타나게 함
      • slideUp() : 요소를 슬라이딩 효과로 숨김
      • slideToggle() : 숨겼다 보였다 교대로 실행(slideDown() / slideUp() 교대로 실행)
    • Fading 효과
      • fadeIn() : 요소를 선명하게 만들면서 나타남
      • fadeOut() : 요소를 흐리게 하면서 숨김(영역도 사라짐)
      • fadeToggle() : fadeIn() / fadeOut() 교대로 실행
      • fadeTo() : 요소의 불투명도 조정, 투명도 0으로 안 보여도 영역은 그대로 남아 있음.
    • Animate 효과
      • animate(속성)
      • 형식
          1. $(대상).animate( {속성(CSS)}, duration(효과 진행 속도), 'easing'(진행 효과) );
          1. $(대상).animate( {속성(CSS)}, duration(효과 진행 속도), 'easing'(진행 효과), function() { 효과 완료 후 수행할 내용 } );
      • 애니메이션 정지
        • $(선택자).stop(); // false로 입력한 것으로 간주
        • $(선택자).stop(true); // clearQueue
        • $(선택자).stop(true, true); // clearQueue, goToEnd
          • clearQueue : 대기열에 있는 함수 모두 제거, 예약된 애니메이션 초기화(clearQueue() 메소드 실행 효과)
          • goToEnd : 제자리에서 멈추는 것이 아니라 지정한 최종 상태에서 멈춤
Basic효과 예제 - basicEffect.html
    <style type="text/css">
        #wrap { margin:0 auto;  width:800px; text-align:center; }
        .menuItem { display:inline-block; margin:20px; }        
        hr { margin-bottom:20px; }        
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {                
            $('#show').on('click', function() {
                $('img').show('slow');
            })
            $('#hide').on('click', () => {
                $('img').hide('fast');
            })
            // toggle1 버튼 : 속도 0.5초
            $('#toggle1').on('click', () => {
                $('img').toggle(500);
            })
            // toggle2 버튼 : 속도 3초 swing
            $('#toggle2').on('click', () => {
                $('img').toggle(3000, 'swing');
            })
            // toggle3 버튼 : 속도 3초 linear
            $('#toggle3').on('click', () => {
                $('img').toggle(3000, 'linear');
            })
         });
    </script>
</head>
<body>
    <div id="wrap">
         <h1>Basic 효과 </h1>
         <div id="menu">
             <div class="menuItem"><a href="#" id="show">show</a></div>
             <div class="menuItem"><a href="#" id="hide">hide</a></div>
             <div class="menuItem"><a href="#" id="toggle1">toggle1 0.5초</a></div>
             <div class="menuItem"><a href="#" id="toggle2">toggle2 3초 'swing'</a></div>
             <div class="menuItem"><a href="#" id="toggle3">toggle3 3초 'linear'</a></div>    
         </div>
         <hr>
         <img src="image/pink.png">         
    </div>
</body>
Sliding효과 예제 - slideEffect.html
<style type="text/css">    
            *{ text-align:center;}        
            #menuBox {width:100px; margin:0 auto; margin-bottom:30px;}    
            #menuBox:hover { 
                    background-color:orange;
                    color:blue;
                    font-weight:bold;
                }                
            #subMenuBox {display:none; } 
        </style>
        <script src="jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                 $('#menuBox').hover(
                     // 메뉴에 마우스 올리면 subMenuBox가 slideDown 되면서 영역이 나타나고 이미지 보임
                     function() {
                         $('#subMenuBox').slideDown(1000);
                     },
                     // 메뉴에 마우스 떼면 subMenuBox가 slideUp 되면서 영역이 사라지고 이미지 안 보임
                     function() {
                        $('#subMenuBox').slideUp(1000);
                     }
                 );
            });
        </script>
    </head>
    <body>
        <div>
            <div><h3>Sliding 효과</h3></div>
            <div id="menuBox">메뉴</div>         
            <div id="subMenuBox">
                <img src="image/black.png">
            </div> 
            <button>버튼의 위치는?</button>             
        </div>
    </body>
Fading 예제 - fadeEffect.html, fadeToEffect.html
<style type="text/css">
            h2{
                width:300px; 
                height:40px;
                padding:10px;
                background-color:red;
                color:yellow;
                display:none;
                }
            ul { list-style:none; }      /* type 없음 */    
            li { display:inline-block; margin-right:30px; }                
        </style>    
        <script src="jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#fadeIn').on('click', function() {
                    $('h2').fadeIn('slow');
                });
                // 영역도 사라진다.
                $('#fadeOut').on('click', function() {
                    $('h2').fadeOut(2000);
                });
                $('#fadeToggle').on('click', function() {
                    $('h2').fadeToggle(3000, 'linear');
                })
            });
        </script>
     </head>          
    <body>
        <center>
            <h1>Fading 효과 </h1>
            <ul>
                <li><a href="#" id="fadeIn">fadeIn</a></li>
                <li><a href="#" id="fadeOut">fadeOut</a></li>
                <li><a href="#" id="fadeToggle">fadeToggle</a></li>
            </ul>
            <hr>
            <h2>Have a Nice Day!</h2>
            <h3>난 어디에 놓일까?</h3>
        </center>
    </body>
<style type="text/css">
            ul { list-style:none; }    
            li { display:inline-block; margin-right:30px; }                
        </style>   
        <script src="jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // 투명도가 0이 되어 보이지 않아도 영역은 남아 있다.
                $('#off').on('mouseover', function() {
                    $('img').fadeTo(1000, 0);
                });
                $('#on').on('mouseover', function() {
                    $('img').fadeTo(1000, 1);
                });
                $('#50').on('mouseover', function() {
                    $('img').fadeTo(1000, 0.5);
                });
            });
        </script>     
    </head>    
    <body>
        <center>
            <h1>fadeTo() 효과 </h1>
            <ul>
                <li><a href="#" id="off">opacity : 0</a></li>
                <li><a href="#" id="on">opacity : 1</a></li>
                <li><a href="#" id="50">opacity : 0.5</a></li>
            </ul>          
            <hr>
            <img src="image/TakashiAkasaka.jpg"> 
            <h3>난 어디에 놓일까?</h3>
        </center>
    </body>
Animate 예제 - animate1.html, animate2.html, animate3.html
 <style type="text/css">            
            div {
                width: 50px; 
                height: 50px;
                line-height:50px;
                text-align:center;
                background-color: rgb(0, 176, 240);
                position: relative;
               }        
        </style>
        <script src="jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('div').hover(
                    function () {
                        $(this).animate({left:500}, 1000);
                },
                    function() {
                        $(this).animate({left:0}, 4000);
                }
                );
             });
        </script>
    </head>        
     <body>    
        <div>1</div><div>2</div>
        <div>3</div><div>4</div>
        <div>5</div><div>6</div> 
    </body>
<script src="jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#startBtn').on('click', function() {
                    $('div').each(function(index) {
                        $(this).delay(index * 500).animate( {left:500}, 'slow' );
                    });
                });
                $('#backBtn').on('click', function() {
                    $('div').each(function(index) {
                        $(this).delay(index * 500).animate( {left:0}, 'slow' );
                    });
                });
             });
        </script>
    </head>        
     <body> 
         <button id="startBtn">이동</button>
        <button id="backBtn">원위치</button><p>
        <div></div><div></div>
        <div></div><div></div>
        <div></div><div></div>
    </body><script src="jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#startBtn').on('click', function() {
                    $('div').each(function(index) {
                        $(this).delay(index * 500).animate( {left:500}, 'slow' );
                    });
                });
                $('#backBtn').on('click', function() {
                    $('div').each(function(index) {
                        $(this).delay(index * 500).animate( {left:0}, 'slow' );
                    });
                });
             });
        </script>
    </head>        
     <body> 
         <button id="startBtn">이동</button>
        <button id="backBtn">원위치</button><p>
        <div></div><div></div>
        <div></div><div></div>
        <div></div><div></div>
    </body>
<script type="text/javascript">            
            $(document).ready(function() {
                $('#box1').animate({left: '+=100'}, 1000)
                                .animate({width: '+=100'}, 2000)
                                .animate({height: '+=100'}, 2000);

                // 6초 후에 함수 실행
                setTimeout(function(){
                    $("div").clearQueue();
                    $("div").hide();                    
                }, 6000);

                $('#box2').animate({left: '+=100'}, 1000)
                                .animate({width: '+=100'}, 2000)
                                .animate({height: '+=100'}, 2000,
                                    function(){
                                        $(this).css('transform', 'rotate(30deg)');
                                    }                                        
                                );
            });
        </script>       
    </head>       
    <body>    
        <div id="box1"></div>
        <div id="box2"></div>
    </body>
728x90
저작자표시

'FE > jQuery' 카테고리의 다른 글

jQuery - canvas 태그  (0) 2021.12.15
jQuery - 응용 예제(음성 녹음, 녹음 파일 저장)  (7) 2021.12.15
jQuery - DOM 요소 클래스 속성(CSS 동적 적용)  (0) 2021.12.15
jQuery - DOM 요소의 추가 및 삭제  (0) 2021.12.15
jQuery - DOM 요소 조작  (0) 2021.12.15
'FE/jQuery' Related Articles more
Comments