본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[jQuery] Custom

WEB'S 2018. 9. 29. 10:58

Animaition

애니메이션과 관련된 제이쿼리 메서드입니다.
메서드 설명
.animate() 선택한 요소에 애니메이션을 적용합니다.
.clearQueue() 선택한 요소에 첫 번째 큐만 실행하고 나머지 대기 중인 큐는 모두 삭제합니다.
.delay() 선택한 요소의 애니메이션를 효과를 지연합니다.
.dequeue() 선택한 요소 스택에 쌓인 큐를 모두 제거합니다.
.finish() 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다.
.queue() 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다.
.stop() 선택한 요소의 실행중인 애니메이션을 정지합니다.

Sample1

기본적인 jQuery 애니메이션 예제입니다.

결과
리셋 클릭
TOTAL
<!DOCTYPE html>
<html lang="ko">
<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</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .choice > a{    
            border: 1px solid #5f6368;
            padding: 7px 20px 5px 20px;
            display: inline-block;
            border-radius: 20px;
            text-decoration: none;
            margin: 3px;
        }
    </style>
</head>
<body>
    
    <div class="animation ani1">
        <div class="box box1"></div>
        <div class="box box1"></div>
        <div class="box box1"></div>
    </div>

    <div class="choice choice1">
        <a href="#" class="reset1">리셋</a>
        <a href="#" class="start1">클릭</a>
    </div>

    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .reset1").on("click",function(e){
            e.preventDefault();
            $(".box1").stop(false,true);
        });

        $(".choice1 .start1").click(function(){
            $(".box1")
            .animate({ "left": $('.animation').width()-70+"px" },1000)
            .animate({ "left": "0%" },1000)
        });
    </script>
</body>
</html>

Sample2

jQuery 움직임 효과 애니메이션 예제입니다.

결과
리셋 linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce
TOTAL
<!DOCTYPE html>
<html lang="ko">
<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</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .choice > a{    
            border: 1px solid #5f6368;
            padding: 7px 20px 5px 20px;
            display: inline-block;
            border-radius: 20px;
            text-decoration: none;
            margin: 3px;
        }
    </style>
</head>
<body>
    
    <div class="animation ani2">
        <div class="box box2"></div>
        <div class="box box2"></div>
        <div class="box box2"></div>
    </div>

    <div class="choice choice2">
        <a href="#" class="reset2">리셋</a>
        <a href="#" class="start2">linear</a>
        <a href="#" class="start2">swing</a>
        <a href="#" class="start2">easeInQuad</a>
        <a href="#" class="start2">easeOutQuad</a>
        <a href="#" class="start2">easeInOutQuad</a>
        <a href="#" class="start2">easeInCubic</a>
        <a href="#" class="start2">easeOutCubic</a>
        <a href="#" class="start2">easeInOutCubic</a>
        <a href="#" class="start2">easeInQuart</a>
        <a href="#" class="start2">easeOutQuart</a>
        <a href="#" class="start2">easeInOutQuart</a>
        <a href="#" class="start2">easeInQuint</a>
        <a href="#" class="start2">easeOutQuint</a>
        <a href="#" class="start2">easeInOutQuint</a>
        <a href="#" class="start2">easeInSine</a>
        <a href="#" class="start2">easeOutSine</a>
        <a href="#" class="start2">easeInOutSine</a>
        <a href="#" class="start2">easeInExpo</a>
        <a href="#" class="start2">easeOutExpo</a>
        <a href="#" class="start2">easeInOutExpo</a>
        <a href="#" class="start2">easeInCirc</a>
        <a href="#" class="start2">easeOutCirc</a>
        <a href="#" class="start2">easeInOutCirc</a>
        <a href="#" class="start2">easeInElastic</a>
        <a href="#" class="start2">easeOutElastic</a>
        <a href="#" class="start2">easeInOutElastic</a>
        <a href="#" class="start2">easeInBack</a>
        <a href="#" class="start2">easeOutBack</a>
        <a href="#" class="start2">easeInOutBack</a>
        <a href="#" class="start2">easeInBounce</a>
        <a href="#" class="start2">easeOutBounce</a>
        <a href="#" class="start2">easeInOutBounce</a>
    </div>

    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(".choice2 .reset2").on("click",function(e){
            e.preventDefault();
            $(".box2").stop(false,true);
        });

        $(".choice2 .start2").click(function(e){
            e.preventDefault();
            const easing = $(this).text();
            $(".box2")
            .animate({ "left": $(".animation").width() - 110 + "px" },1000, easing)
            .animate({ "left": "0%" },1000, easing)
        });
    </script>
</body>
</html>

Sample3

delay 애니메이션 예제입니다.

결과
리셋 클릭
TOTAL
<!DOCTYPE html>
<html lang="ko">
<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</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .choice > a{    
            border: 1px solid #5f6368;
            padding: 7px 20px 5px 20px;
            display: inline-block;
            border-radius: 20px;
            text-decoration: none;
            margin: 3px;
        }
    </style>
</head>
<body>
    
    <div class="animation ani3">
        <div class="box box3"></div>
        <div class="box box3"></div>
        <div class="box box3"></div>
    </div>

    <div class="choice choice3">
        <a href="#" class="reset3">리셋</a>
        <a href="#" class="start3">클릭</a>
    </div>

    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(".choice3 .reset3").on("click",function(e){
            e.preventDefault();
            $(".box2").stop(false,true);
        });

        const leftWidth = $(".animation").width() - 110 + "px"

        $(".choice3 .start3").click(function(e){
            e.preventDefault();
            $(".box3").eq(0).delay(100).animate({ left: leftWidth },1000).animate({ left: "0%"},1000);
            $(".box3").eq(1).delay(200).animate({ left: leftWidth },1000).animate({ left: "0%"},1000);
            $(".box3").eq(2).delay(300).animate({ left: leftWidth },1000).animate({ left: "0%"},1000);
        });
    </script>
</body>
</html>

Sample4

duration 애니메이션 예제입니다.

결과
리셋 클릭
TOTAL
<!DOCTYPE html>
<html lang="ko">
<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</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .choice > a{    
            border: 1px solid #5f6368;
            padding: 7px 20px 5px 20px;
            display: inline-block;
            border-radius: 20px;
            text-decoration: none;
            margin: 3px;
        }
    </style>
</head>
<body>
    
    <div class="animation ani4">
        <div class="box box4"></div>
        <div class="box box4"></div>
        <div class="box box4"></div>
    </div>

    <div class="choice choice4">
        <a href="#" class="reset4">리셋</a>
        <a href="#" class="start4">클릭</a>
    </div>

    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(".choice4 .reset4").on("click",function(e){
            e.preventDefault();
            $(".box4").stop(false,true);
        });

        const leftWidth = $(".animation").width() - 110 + "px"

        $(".choice4 .start4").click(function(e){
            e.preventDefault();
            $(".box4").eq(0).animate({ left: leftWidth },1000).animate({ left: "0%"},1000);
            $(".box4").eq(1).animate({ left: leftWidth },2000).animate({ left: "0%"},2000);
            $(".box4").eq(2).animate({ left: leftWidth },3000).animate({ left: "0%"},3000);
        });
    </script>
</body>
</html>

Sample5

클릭하면 이동하는 애니메이션 예제입니다.

결과
right left top bottom
TOTAL
<!DOCTYPE html>
<html lang="ko">
<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</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .choice > a{    
            border: 1px solid #5f6368;
            padding: 7px 20px 5px 20px;
            display: inline-block;
            border-radius: 20px;
            text-decoration: none;
            margin: 3px;
        }
    </style>
</head>
<body>
    
    <div class="animation ani5">
        <div class="box box5"></div>
        <div class="box box5"></div>
        <div class="box box5"></div>
    </div>

    <div class="choice choice5">
        <a href="#" class="reset5">리셋</a>
        <a href="#" class="start5-1">right</a>
        <a href="#" class="start5-2">left</a>
        <a href="#" class="start5-3">top</a>
        <a href="#" class="start5-4">bottom</a>
    </div>

    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(".choice5 a").click(function(e){ 
            e.preventDefault();
        });
        $(".start5-1").click(function(){
            $(".box5").animate({ left: "+=100" },"slow","easeOutQuint");
        });
        $(".start5-2").click(function(){
            $(".box5").animate({ left: "-=100" },"slow","easeOutQuint");
        });
        $(".start5-3").click(function(){
            $(".box5").animate({ top: "-=100" },"slow","easeOutQuint");
        });
        $(".start5-4").click(function(){
            $(".box5").animate({ top: "+=100" },"slow","easeOutQuint");
        });
    </script>
</body>
</html>

Sample6

무한 반복 애니메이션 예제입니다.

결과
클릭
TOTAL
<!DOCTYPE html>
<html lang="ko">
<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</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .choice > a{    
            border: 1px solid #5f6368;
            padding: 7px 20px 5px 20px;
            display: inline-block;
            border-radius: 20px;
            text-decoration: none;
            margin: 3px;
        }
    </style>
</head>
<body>
    
    <div class="animation ani6">
        <div class="box box6"></div>
    </div>

    <div class="choice choice6">
        <a href="#" class="start6">클릭</a>
    </div>

    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(".choice6 a").click(function(e){ 
            e.preventDefault();
        });

        const leftWidth = $(".animation").width() - 110 + "px"

        $(".choice6 .start6").click(function(){
            loop()
        });

        function loop(){
            $(".box6").animate({ left: leftWidth },1000,"easeOutQuint").animate({ left:"0%" },1000,"easeOutQuint",loop);
        };
    </script>
</body>
</html>

Sample7

무한 반복 애니메이션 예제입니다.

결과
정지 클릭
TOTAL
<!DOCTYPE html>
<html lang="ko">
<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</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .choice > a{    
            border: 1px solid #5f6368;
            padding: 7px 20px 5px 20px;
            display: inline-block;
            border-radius: 20px;
            text-decoration: none;
            margin: 3px;
        }
    </style>
</head>
<body>
    
    <div class="animation ani7">
        <div class="box box7"></div>
    </div>

    <div class="choice choice7">
        <a href="#" class="reset7">정지</a>
        <a href="#" class="start7">클릭</a>
    </div>

    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(".choice7 a").click(function(e){ 
            e.preventDefault();
        });

        const leftWidth = $(".animation").width() - 110 + "px";
        let loop2 = "";

        $(".choice7 .start7").click(function(){
            loop2 = setInterval (function(){
                $(".box7").animate({ left: leftWidth },1000,"easeOutQuint").animate({ left:"0%" },1000,"easeOutQuint");
            },2000);
        });

        $(".choice7 .reset7").click(function(){
            clearInterval(loop2)
        });
    </script>
</body>
</html>

Sample8

일정한 시간이 지나면 없어지는 애니메이션 예제입니다.

결과
리셋 클릭
TOTAL
<!DOCTYPE html>
<html lang="ko">
<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</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .choice > a{    
            border: 1px solid #5f6368;
            padding: 7px 20px 5px 20px;
            display: inline-block;
            border-radius: 20px;
            text-decoration: none;
            margin: 3px;
        }
    </style>
</head>
<body>
    
    <div class="animation ani8">
        <div class="box box8"></div>
    </div>

    <div class="choice choice8">
        <a href="#" class="reset8">리셋</a>
        <a href="#" class="start8">클릭</a>
    </div>

    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(".choice8 a").click(function(e){ 
            e.preventDefault();
        });

        const leftWidth = $(".animation").width() - 110 + "px";

        $(".choice8 .start8").click(function(e){
            $(".box8").animate({ left: leftWidth },1000,"easeOutQuint").animate({ left: 0 },1000,"easeOutQuint");
            setTimeout(out, 3000)
        });

        function out(){
            $(".box8").clearQueue().hide();
        }

        $(".choice8 .reset8").click(function(e){
            $(".box8").show()
        });
    </script>
</body>
</html>

Sample9

일정한 시간이 지나면 한번만 작동하는 애니메이션 예제입니다.

결과
클릭
TOTAL
<!DOCTYPE html>
<html lang="ko">
<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</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .choice > a{    
            border: 1px solid #5f6368;
            padding: 7px 20px 5px 20px;
            display: inline-block;
            border-radius: 20px;
            text-decoration: none;
            margin: 3px;
        }
    </style>
</head>
<body>
    
    <div class="animation ani9">
        <div class="box box9"></div>
    </div>

    <div class="choice choice9">
        <a href="#" class="start9">클릭</a>
    </div>

    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(".choice9 a").click(function(e){ 
            e.preventDefault();
        });

        const leftWidth = $(".animation").width() - 110 + "px";

        $(".choice9 .start9").click(function(){
            setTimeout (function(){
                $(".box9").animate({ left: leftWidth },1000,"easeOutQuint").animate({ left:"0%" },1000,"easeOutQuint");
            },2000);
        });
    </script>
</body>
</html>

Sample10

콜백함수 애니메이션 예제입니다.

결과
클릭
TOTAL
<!DOCTYPE html>
<html lang="ko">
<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</title>
    <style>
        /* option */
        .animation {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .box {
            position: relative;
            width: 60px; height: 60px; line-height: 60px;
            text-align: center; color: #fff; font-size: 12px;
            margin: 10px;
            border-radius: 50%;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
        }
        .box::before {
            counter-increment: items;
            content: counter(items);
        }
        .choice > a{    
            border: 1px solid #5f6368;
            padding: 7px 20px 5px 20px;
            display: inline-block;
            border-radius: 20px;
            text-decoration: none;
            margin: 3px;
        }
    </style>
</head>
<body>
    
    <div class="animation ani10">
        <div class="box box10"></div>
    </div>

    <div class="choice choice10">
        <a href="#" class="start10">클릭</a>
    </div>

    <!-- script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(".choice10 a").click(function(e){ 
            e.preventDefault();
        });

        const leftWidth = $(".animation").width() - 110 + "px";

        $(".choice10 .start10").click(function(){
            $(".box10").animate({left: leftWidth },1000,"easeOutQuint",function(){
                alert("도착");
                $(".box10").animate({left: 0 },1000,"easeOutQuint");
            });
        });
    </script>
</body>
</html>

JQUERY Related Articles

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기

Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바