본문 바로가기
Front/jQuery

jQuery - 효과

by Hyeon_ 2021. 12. 15.

jQuery 효과

jQuery로 가능한 시각적 효과

  • Basic 효과

    • hide() / show() / toggle()

  • Sliding 효과

    • slideDown() / slideUp() / slideToggle()

  • Fading 효과

    • fadeIn() / fadeOut() / fadeToggle() / fadeTo()

  • Animate 효과

    • animate(속성)

공통 인수

  • duration : 효과 진행 속도 (slow / normal / fast)
  • callback : 효과 완료 후 수행할 함수
  • easing
    • 전체 애니메이션(효과)의 적용 시간 비율을 원하는 진행 비율로 매핑
    • swing : sin 곡선(느리게 시작해서 중간에 빠르게 진행되다가 나중에 다시 느려짐)
    • liner : 선형

Basic 효과

  • hide() : 요소 숨기기
  • show() : 요소 표시(출력)
  • toggle() : 요소를 숨기거나 표시
    • hide() / show() 교대로 실행
BasicEffect.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic 효과</title>
    <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="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                // [show] 버튼 : 속도 : slow
                $('#show').on('click', function(){
                    $('img').show('slow');
                });

                // [hide] 버튼 : 속도 : fast
                $('#hide').on('click', function(){
                    $('img').hide('fast');
                });

                // [toggle1] 버튼 : 속도 : 0.5초
                $('#toggle1').on('click', function(){
                    $('img').toggle(500);
                });

                // [toggle2] 버튼 : 속도 : 3초 진행 : swing
                $('#toggle2').on('click', function(){
                    $('img').toggle(3000, 'swing');
                });

                // [toggle3] 버튼 : 속도 : 3초 진행 : linear(선형 : 일정한 속도로 진행)
                $('#toggle3').on('click', function(){
                    $('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>
</html>

Sliding 효과

  • slideDown() : 요소를 슬라이딩 효과로 나타나게 함
  • slideUp() : 요소를 슬라이딩 효과로 숨김
  • slideToggle() : 숨겼다 보였다 교대로 실행
    • slideDown() / slideUp() 교대로 실행
slideEffect.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sliding 효과</title>
    <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="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                $('#menuBox').hover(
                    function(){
                        // [메뉴]에 마우스 올리면 
                        // subMenuBox가 slideDown되면서 영역 나타나고 이미지 보임
                        $('#subMenuBox').slideDown(500);
                    },
                    function(){    
                        $('#subMenuBox').slideUp(500);
                    }
                )
            });
        </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>
</html>

Fading 효과

  • fadeIn() : 요소를 선명하세 만들면서 나타남

  • fadeOut() : 요소를 흐리게 하면서 숨김 (영역도 사라짐)

  • fadeToggle() : fadeIn() / fadeOut() 교대로 실행

  • fadeTo()

    • 요소의 불투명도 조정
    • 투명도 0으로 안 보여도 영역은 그대로 남아있음
fadeEffect.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Fading 효과</title>
    <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="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                $('#fadeIn').on('click', function(){
                    $('h2').fadeIn('slow');
                });

                // fadeout
                $('#fadeOut').on('click', function(){
                    $('h2').fadeOut(2000);
                });

                // fadetoggle
                $('#fadeToggle').on('click', function(){
                    $('h2').fadeToggle('lenear');
                });
            });
        </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>
</html>
fadeToEffect.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>fadeTo 효과</title>
    <style type="text/css">
            ul { list-style:none; }
            li { display:inline-block; margin-right:30px; }
        </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                $('#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>
</html>

Animate 효과

  • animate(속성)
  • 사용자 CSS 효과를 지정하여 애니메이션 수행
  • duration : 효과 진행 속도 (slow / normal / fast)
  • callback : 효과 완료 후 수행할 함수
  • easing
    • 전체 애니메이션(효과)의 적용 시간 비율을 원하는 진행 비율로 매핑
    • swing : sin 곡선(느리게 시작해서 중간에 빠르게 진행되다가 나중에 다시 느려짐)
    • liner : 선형
  • 형식
$(대상).animate(
    {속성(CSS)},
     duration(효과 진행 속도),
         easing(진행 효과),
    function() {
    효과 완료 후 수행할 내용
    }
);

애니메이션 정지

  • $(선택자).stop(); //false 입력한 것으로 간주
  • $(선택자).stop(true); // clearQueue
  • $(선택자).stop(true, true); // clearQueue, goToEnd
  • clearQueue
    • 대기열에 있는 함수 모두 제거. 예약된 애니메이션 초기화
    • (clearQueue() 메소드 실행 효과)
  • goToEnd
    • 제자리에서 멈추는 것이 아니라 지정한 최종 상태에서 멈춤
animate1.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>animate() 효과</title>
    <style type="text/css">
            div {
                width: 50px;
                height: 50px;
                line-height:50px;
                text-align:center;
                background-color: rgb(0, 176, 240);
                position: absolute; // relative로 바꾸면 한줄로 서있음
               }
        </style>
    <script src="js/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>
</html>
animate2.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>animate() 효과</title>
    <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="js/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>
</html>
animate3.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>animate() 효과</title>
    <style type="text/css">
            div {
                width: 50px; height: 50px;
                background-color: rgb(0, 176, 240);
                position: relative;
            }
            #box2 { top:100px; }
        </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <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>
</html>
저작자표시 비영리 변경금지

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

응용 예제 - <canvas> 태그  (0) 2021.12.15
응용 예제 - 음성녹음  (0) 2021.12.15
jQuery - DOM 요소의 속성 추가 및 삭제  (0) 2021.12.15
jQuery - DOM 요소 조작  (0) 2021.12.15
jQuery - 이벤트 객체 메소드  (0) 2021.12.15

관련글

티스토리툴바