Chap 6. jQuery 효과(effect)

김승현·2021년 11월 21일
0
  • 애니메이션처럼 동작하게 만드는 jQuery 기법

jQuery의 기본 effect (효과)

메소드의미
show()문서 객체를 크게 만들며 보여줌
hide()문서 객체를 작게 만들며 사라지게 함
toggle()show()메소드와 hide() 메소드를 번갈아 가면서 실행
slideDown()문서 객체를 슬라이드 효과와 함께 보여줌
slideUp()문서 객체를 슬라이드 효과와 함께 사라지게 함
slideToggle()slideDown() 메소드와 slideUp() 메소드를 번갈아 가면서 실행 함
fadeIn()문서 객체를 선명하게 하며 보여줌
fadeOut()문서 객체를 흐리게 하며 사라지게 함
fadeToggle()fadeIn() 메소드와 fadeOut() 메소드를 번갈아 가면서 실행 함

🕵️‍♂️ 작성 방법

$('선택자').메소드명();
$('선택자').메소드명(\[speed]);
$('선택자').메소드명(\[speed], \[easing], \[callback 함수]);
  • speed : 실행 속도 (밀리세컨) / 숫자값 또는 slow, fast(문자열)
  • easing : 변경되는 지점별 속도 / linear , swing (문자열)
    • linear : 일정한 속도
    • swing : 처음과 끝 부분은 속도가 느리고 중간에는 빨라짐
  • callback : 메소드 실행 후 실행할 함수


EX) show, hide, toggle

EX) slideDown, slideUp, slideToggle

EX) fadeIn, fadeOut, fadeToggle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

    <style>
        div {
            border: 1px solid red;
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>

    <br><button id="btn3"></button><br>
    <img src="../image/mayo.png" width="200" height="200"><br>
    <div>텍스트</div>

    <script>
        // show, hide, toggle
        $('#btn3').click(function() {
            var text = $(this).html();
            if (text == '▲') {
                $(this).html('▼');
                $('img').hide(1000);
            } else {
                $(this).html('▲');
                $('img').show(1000);
            }

            //$('img').toggle(1000);

        });


        // slideUp, slideDown slideToggle
        $('#btn3').click(function() {
            var text = $(this).html();
            if (text == '▲') {
                $(this).html('▼');
                //$('img').slideUp(1000);
            } else {
                $(this).html('▲');
                //$('img').slideDown(1000);
            }

            $('img').slideToggle(1000);

        });


        // fadeIn, fadeOut, fadeToggle
        $('#btn3').click(function() {
            var text = $(this).html();
            if (text == '▲') {
                $(this).html('▼');
                //$('img').fadeIn(1000);
            } else {
                $(this).html('▲');
                //$('img').fadeOut(1000);
            }

            $('img').fadeToggle(1000);

        });
    </script>

</body></html>




animate 함수

  • 현재의 css 속성을 설정한 값으로 차츰 변경되는 효과를 주는 메소드

🕵️‍♂️ 작성방법

$('선택자').animate( { CSS 속성 성정 }, \[speed] , \[easing], \[callback 함수] );


EX) animate 함수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

    <style>
        div {
            border: 1px solid red;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }

        img {
            position: absolute;
            left: -190px;
        }
    </style>
</head>

<body>

    <button id="btn1">div 버튼1</button><button id="btn2">div 버튼2</button><br>
    <button id="btn3">img 버튼1</button><button id="btn4">img 버튼4</button><br>

    <img src="../image/mayo.png" width="200" height="200"><br>
    <div>텍스트</div>

    <script>
        $('#btn1').click(function() {

            //$('img').animate(css속성, [시간], [속도], [콜백함수]);
            $('div').animate({
                width: '400px'
            }, 5000, 'swing', function() {
                $(this).css('border', '5px dashed red');
            });
        });

        $('#btn2').click(function() {
            $('div').animate({
                width: '100px'
            }, 2000, 'linear', function() {
                $(this).css('boder', '1px solid red');
            })

        });

        $('#btn3').click(function() {
            $('img').animate({
                left: '0px'
            }, 2000);
        })

        $('#btn4').click(function() {
            $('img').animate({
                left: '-190px'
            }, 2000);
        })
    </script>

</body></html>




chaining 기법

  • 명령을 차례대로 실행할 수 있는 기법



EX) chaining 기법, stop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

    <style>
        div {
            border: 1px solid red;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        #btn1{
           
        }
        
    </style>
</head>

<body>

    <button id="btn1">animate</button><button id="btn2">stop</button> <br>


    <img src="../image/mayo.png" width="200" height="200" id="img1"><br>
    <div>텍스트</div>

    <script>
  
        
        $('#btn1').click(function(){
            $('#img1').hide(1000).show(1000).animate({width:'400px',height:'400px'},2000).slideUp(1000).slideDown(1000).animate({width:'200px',height:'200px'});
        });
        
        
        $('#btn2').click(function(){
           $('#img1').stop();
        });
        
        
    </script>

</body></html>
profile
개발자로 매일 한 걸음

0개의 댓글