220715 - 제이쿼리 - 애니메이션 (기본 시각 효과, 사용자 정의 효과)

Programming/국비학원

220715 - 제이쿼리 - 애니메이션 (기본 시각 효과, 사용자 정의 효과)

지고르 2022. 7. 17. 22:22

기본 시각 효과

show / hide / toggle

: 선택한 문서객체를 점점 (커지게 / 작아지게 / 번갈아가며) 보여줌

$(선택자).show();

$(선택자).show(speed);
speed=문자열('fast','normal','slow') or 밀리초

$(선택자).show(speed, callback);
callback: 효과 실행 완료 후, 새로 실행할 함수 지정

$(선택자).show(speed, easing, callback);
easing: speed 가속화

show

    <style>
        .news{
            display: none;
        }
    </style>
    <script>
        $(function(){
            $('button').click(function(){
                $('.news').show(3000);
            });
        });
    </script>
</head>
<body>
    <button>뉴스 보기</button>
    <div class="news">
        <h1>대법 "국시 거부 의대생, 추가시험 응시 제한 정당"</h1>
    </div>
</body>

<style>
        .images{
            display: none;
        }
        .images img{
            width: 500px;
        }
    </style>
    <script>
        $(function(){
            $('button').click(function(){
                $('.images').show('fast');
            });
        });
    </script>
</head>
<body>
    <button>뉴스 보기</button>
    <div class="images">
        <img src="../images/Penguins.jpg" alt="">
    </div>
</body>

    <script src="js/jquery-3.6.0.min.js"></script> 
    <style>
        .images{
            display: none;
        }
        .images img{
            width: 500px;
        }
    </style>
    <script>
        $(function(){
            $('button').click(function(){
                $('.images').show('fast',function(){
                    alert('이상 끝');
                });
            });
        });
    </script>
</head>
<body>
    <button>뉴스 보기</button>
    <div class="images">
        <img src="../images/Penguins.jpg" alt="">
    </div>
</body>

hide

    <style>
        .images img{
            width: 500px;
        }
    </style>
    <script>
        $(function(){
            $('button').click(function(){
                //$('.images').hide('slow');
                $('.images').hide(2000,function(){
                    alert('펭귄');
                });
            });
        });
    </script>
</head>
<body>
    <button>뉴스 보기</button>
    <div class="images">
        <img src="../images/Penguins.jpg" alt="">
    </div>

toggle

<style>
        .images img{
            width: 500px;
        }
    </style>
    <script>
        $(function(){
            $('button').click(function(){
                $('.images').toggle('fast');
            });
        });
    </script>
</head>
<body>
    <button>뉴스 보기</button>
    <div class="images">
        <img src="../images/Penguins.jpg" alt="">
    </div>
</body>

slideDown / slideUp / slideToggle

: 문서객체를 슬라이드 효과로 보여줌 (아래로) / 없앰 (위로) / 번갈아가며

<script src="js/jquery-3.6.0.min.js"></script> 
    <style>
        .images img{
            width: 500px;
            display: none;
        }
    </style>
    <script>
        $(function(){
            $('button').click(function(){
                $('.images img').slideDown(1000);
            });
        });
    </script>
</head>
<body>
    <button>이미지 토글</button>
    <div class="images">
        <img src="../images/Penguins.jpg" alt="">
    </div>
</body>

    <style>
        .images img{
            width: 500px;
            /* display: none; */
        }
    </style>
    <script>
        $(function(){
            $('button').click(function(){
                //$('.images').slideUp(1000,function(){ //div 전체 적용되어 h2도 같이 숨겨짐
                $('.images img').slideUp(1000,function(){ //img만 숨겨지고 h2 추가
                    $('.images').append('<h2>펭귄 사진</h2>');
                });
            });
        });
    </script>
</head>
<body>
    <button>이미지</button>
    <div class="images">
        <img src="../images/Penguins.jpg" alt="">
    </div>
</body>

    <style>
        .images img{
            width: 500px;
            /* display: none; */
        }
    </style>
    <script>
        $(function(){
            $('button').click(function(){
$('.images img').slideToggle(1000);
            });
        });
    </script>
</head>
<body>
    <button>이미지</button>
    <div class="images">
        <img src="../images/Penguins.jpg" alt="">
    </div>
</body>

fadeIn / fadeOut / fadeToggle

: 문서객체를 선명하게 나타냄/ 흐려지며 없어짐 / 번갈아 적용

fadeIn

    <style>
        div{
            display: none;
        }
    </style>
    <script>
        $(function(){
            $('button').click(function(){
                $('div').fadeIn();
            });
        });
    </script>
</head>
<body>
    <button>뉴스</button>
    <div>
        <h1>오늘의 날씨</h1>
        <p>15일 전국 곳곳에 소나기가 내리지만 남부지방은 불볕더위가 이어질 전망이다.

            서울·경기 동부와 강원도, 충청 내륙, 전라 동부, 경상권은 오전부터 오후 사이 5∼20㎜의 소나기가 올 전망이다.

            이날 밤부터 16일 아침까지 경기 동부와 강원도에는 5∼40mm의 소나기가 예상된다.
            </p>
    </div>
</body>

fadeOut 예제 : 사진 겹친 후 하나씩 사라지게 하기

    <style>
        #person{
            position: relative;
        }
        #person>img{
            position: absolute;
        }
    </style>
    <script>
        $(function(){
            $('div').click(function(){
                $('#person>img').eq(2).fadeOut(1000,function(){ //callback
                    $('#person>img').eq(1).fadeOut(1000,function(){
                        $('#person>img').eq(0).fadeOut(1000);
                    });
                });
            });
        });
    </script>
</head>
<body>
    <div id="person">
        <img src="../images/송해.jpg" alt="">
        <img src="../images/호동.jpg" alt="">
        <img src="../images/형돈.jpg" alt="">  //제일 뒤 img가 맨 앞에 옴
    </div>
</body>

※ 플러그인(하나의 기능 수행하도록 만들어진 프로그램)

innerfade 플러그인

예제 : 사진 계속 fadeout 반복

<script src="js/jquery-3.6.0.min.js"></script> 
    <style>
        #inner_fade{
            position: relative;
        }
        #inner_fade img{
            position: absolute;
            width: 500px;
        }
    </style>
    <script>
        $(function(){
            setInterval(function(){
                $('#inner_fade>img').last().fadeOut(100, function(){
$(this).prependTo('#inner_fade') //fadeOut한 그림 순서 앞으로 이동
                    .css('display','inline-block'); //fadeOut 시 display:none 되므로 복구
});
            },2000);
        });
    </script>
</head>
<body>
    <div id="inner_fade">
        <img src="../images/Chrysanthemum.jpg" alt="">
        <img src="../images//Desert.jpg" alt="">
        <img src="../images/Hydrangeas.jpg" alt="">
        <img src="../images/Jellyfish.jpg" alt="">
        <img src="../images/Koala.jpg" alt="">
        <img src="../images/Lighthouse.jpg" alt="">
        <img src="../images/Penguins.jpg" alt="">
    </div>
</body>

사용자 정의 효과

$(선택자).animate(object);

$(선택자).animate(object, speed);

$(선택자).animate(object, speed, callback);

$(선택자).animate(object, speed, easing, callback);

    <style>
        img, h2{
            position: relative;
        }
    </style>
    <script>
        $(function(){
            $('img').click(function(){
                $(this).animate({  //객체
                    left:1000 //position 없으면 안 움직임
                }, 5000);
            });
            $('h2').click(function(){
                $(this).animate({
                    left:1000
                },5000,function(){  //callback
                    $(this).html('공부하러 갑니다');
                });
            });
        });
    </script>
</head>
<body>
    <img src="../images/car_green.jpg" alt=""><br>
    <img src="../images/car_red.jpg" alt=""><br>
    <img src="../images/car_purple.jpg" alt="">
    <h2>나는 무엇을 하러 갈까요?</h2>
</body>

    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: rgb(255, 227, 176);
            position: relative;
        }
    </style>
    <script>
        $(function(){
            $('div').hover(function(){
                $(this).animate({
                    left:800,
                    opacity:0
                },2000);
            },function(){
                $(this).animate({
                    left:0,
                    opacity:1
                },2000);
            });
        });
    </script>
</head>
<body>
    <div></div><div></div>
    <div></div><div></div>
    <div></div><div></div>
    <div></div><div></div>
</body>

    <style>
        img{
            width: 55px;
            height: 40px;
        }
    </style>
    <script>
        $(function(){
            $('img').on('mouseenter',function(){
                $(this).animate({ //object
                    width:550,
                    height:400
                },'normal',function(){ //callback
                    $(this).delay(2000).animate({
                        width:55,
                        height:40
                    },'fast');
                });
            });
        });
    </script>
</head>
<body>
    <img src="../images/Penguins.jpg" alt="">
</body>

문제: 그림 클릭할 때마다 width 37 / height 21씩 증가

=> 내 답변
    <style>
        img{
            width: 37px;
            height: 21px;
            cursor: pointer;
        }
    </style>
    <script>
        $(function(){
            $('img').on('click',function(){
                $(this).animate({
                    width:$(this).width()+37,
                    height:$(this).height()+21
                },'fast');
            });
        });
    </script>
</head>
<body>
    <img src="../images/car_green.jpg" alt="">
</body>

=> 예시 답변
    <style>
        img{
            width: 37px;
            height: 21px;
            cursor: pointer;
        }
    </style>
    <script>
        $(function(){
            $('img').on('click',function(){
                var w=$(this).css('width');  //속성값: 37px =>문자로 저장
                var h=$(this).css('height');
                $(this).animate({
                    width:parseInt(w)+37,
                    height:parseInt(h)+21
                },100);
            });
        });
    </script>
</head>
<body>
    <img src="../images/car_green.jpg" alt="">
</body>

문제 : +shift는 더 작아짐

    <style>
        img{
            width: 37px;
            height: 21px;
            cursor: pointer;
        }
    </style>
    <script>
        $(function(){
            $('img').on('click',function(event){ //클릭, 호버 => event
                if (event.shiftKey){  //쉬프트키 누르면서 클릭
                    $(this).animate({
                        width:'-=37',
                        height:'-=21'
                    },100);
                }else{
                    $(this).animate({
                        width:'+=37',
                        height:'+=21'
                    },100);
                }
            });
        });
    </script>
</head>
<body>
    <img src="../images/car_green.jpg" alt="">
</body>