728x90
728x90
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery - animation effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        body {
            font-size: 17px;
            font-family: Arial, Helvetica, sans-serif;
            background: #f4f4f4;
            line-height: 1.5em;
        }

        header {
            background: #333;
            color: white;
            padding: 20px;
            text-align: center;
            border-bottom: 4px solid black;
            margin-bottom: 10px;
        }

        #container {
            width: 90%;
            margin: auto;
            padding: 10px;
        }

        #box {
            background: #333;
            color: white;
            width: 400px;
            height: 90px;
            padding: 40px;
            text-align: center;
        }

        #box2 {
            margin-top: 20px;
            position: relative;
            background: #333;
            color: white;
            width: 100px;
            height: 100px;
            padding: 10px;
            background: cover;
            background-image: url("https://media.giphy.com/media/LT1Pq74cXuNQxyUmLk/giphy.gif");
        }

    </style>

</head>

<body>
    <header>
        <h1>jquery animation</h1>
    </header>

    <div id="container">
        <button id="btnFadeOut">Fade Out</button>
        <button id="btnFadeIn">Fade In</button>
        <button id="btnFadeTog">Fade Toggle</button>
        <hr>
        <div id="box">
            <h1>페이드 효과 연습</h1>
        </div><br>

        <button id="btnSlideUp">슬라이드 업</button>
        <button id="btnSlideDown">슬라이드 다운</button>
        <button id="btnSlideTog">슬라이드 토글</button>
        <button id="btnSlideStop">슬라이드 멈춤</button>
        <hr>
        <div id="box">
            <h1>페이드/슬라이드 효과</h1>
        </div>
        <br>

        <hr>
        <button id="moveLeft">이동-왼쪽</button>
        <button id="moveRight">이동-오른쪽</button>
        <button id="moveAround">이동-어라운드</button>
        <div id="box2"></div>
        <br>

    </div>

    <script>
        //효과 : Fade Out / In / Toggle
        $(document).ready(function () {
            $('#btnFadeOut').on('click', function () {
                $('#box').fadeOut(2000, function () {
                    $('#btnFadeOut').text('사라짐');
                });
            })
            $('#btnFadeIn').on('click', function () {
                $('#box').fadeIn(2000); // 사라지는 동안 걸리는 시간 
            });
            $('#btnFadeTog').on('click', function () {
                $('#box').toggle(2000); // 사라지는 동안 걸리는 시간 
            });


            //효과 : Slide Up / Down / Toggle /Stop
            $('#btnSlideUp').on('click', function () {
                $('#box').slideUp(3000);
            });
            $('#btnSlideDown').on('click', function () {
                $('#box').slideDown(3000);
            });
            $('#btnSlideTog').on('click', function () {
                $('#box').slideToggle(3000);
            });
            $('#btnSlideStop').on('click', function () {
                $('#box').stop(3000);  //stop 소문자 주의
            });

            //효과 : 이동
            $('#moveRight').on('click', function(){
                $('#box2').animate({
                    left: 400
                })
            });
            $('#moveLeft').on('click', function(){
                $('#box2').animate({
                    left: 0
                })
            });
            $('#moveAround').on('click', function(){
                let box = $('#box2');
                box.animate ({
                    left: 300
                });
                box.animate ({
                    top: 200,
                    opacity: 0.2
                });
                box.animate ({
                    left: 300,
                    opacity: 1,
                    width: '300px',
                    height: 300
                });
                box.animate ({
                    left: 0,
                    width: 100,
                    height: 100
                });
                box.animate ({
                    top: 0
                });
            });

        });
    </script>

</body>

</html>

 

728x90
728x90
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

v