VS code-JQuery

최성현·2023년 7월 27일
animate()on 메서드onMethod_동적메서드정적메서드
0

JQuery

목록 보기
6/7

animate()

animate() 메소드 - 시간당 속도 함수
animate() 메소드는 시간당 속도 함수(easing function)을 사용하여 이펙트 효과의 시간당 속도를 설정할 수 있다.
• swing : 시작 / 끝에서는 느리게 움직이지만 중간에서는 빨라진다.
• linear : 일정한 속도로 움직인다.

(선택자) . animate(스타일 [, 지속시간][, 시간당속도함수] [, 콜백 함수]);
• 스타일 : 필수이며, 이펙트 효과를 구성할 CsS 스타일 속성을 정의한다.
• 지속 시간 : 이펙트 효과가 지속될 시간을 전달한다.
• 시간당 속도 함수(easing function): 이펙트 효과의 시간당 속도를 전달한다.
• 콜백 함수: 이펙트 효과의 동작이 완료된 후에 실행할 함수를 정의한다.

animate() 사용법

$("#img1").animate({width:'200px',opacity:'0.5'},3000); //slow,fast,2000(2초)

$("#img1").animate({width:'100px',opacity:'1'},'slow','linear',function(){

	//애니메이션이 끝난 후 처리할 것들
    //alert("끝났어요");
    $(this).after("<b>The End!!!</b>");
});

animate 2개 겹치기

//left+=100 왼쪽 공간 100 : 오른쪽으로 100만큼 이동
$("#one").animate({"left":"+=100"},2000).animate({"borderWidth":"10px"},2000).
animate({"width":"150px"},2000).animate({"height":"150px"},2000);

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        #one{
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: orange;
            border: 1px solid tomato;
            border-radius: 100px;
        }
    </style>
</head>
<body>
    <!--animate() 메소드 - 시간당 속도 함수
        animate() 메소드는 시간당 속도 함수(easing function)을 사용하여 이펙트 효과의 시간당 속도를 설정할 수 있다.
        • swing : 시작 / 끝에서는 느리게 움직이지만 중간에서는 빨라진다.
        • linear : 일정한 속도로 움직인다. 
        
        §(선택자) . animate(스타일 [, 지속시간] [, 시간당속도함수] [, 콜백 함수]);
        • 스타일 : 필수이며, 이펙트 효과를 구성할 CsS 스타일 속성을 정의한다.
        • 지속 시간 : 이펙트 효과가 지속될 시간을 전달한다.
        • 시간당 속도 함수(easing function): 이펙트 효과의 시간당 속도를 전달한다.
        • 콜백 함수: 이펙트 효과의 동작이 완료된 후에 실행할 함수를 정의한다.-->

    <img src="../연예인사진2/냥뇽녕냥24.jpeg" id="img1">
    <hr>
    <div id="one"></div>

    <script>
        // $("#img1").animate({})
        //$("#img1").animate({width:'200px',opacity:'0.5'},3000); //slow,fast,2000(2초)

        //$("#img1").animate({width:'100px',opacity:'1'},'slow','linear',function(){

            //애니메이션이 끝난 후 처리할 것들
            //alert("끝났어요");
            //$(this).after("<b>The End!!!</b>");
        //});

        //left+=100 왼쪽 공간 100 : 오른쪽으로 100만큼 이동
        $("#one").animate({"left":"+=100"},2000).animate({"borderWidth":"10px"},2000).
        animate({"width":"150px"},2000).animate({"height":"150px"},2000);
    </script>
</body>
</html>

animate() 2

animate() 활용법

버튼 활용
animate 사용 했다가 원래대로 되돌리기

$("button:eq(0)").click(function(){

	//애니메이션_box1이 너비가 100씩 커지고 선 굵기가 20px 투명도 조절_3초동안,marginLeft:300px
	$("#box1").animate({width:'+=100',borderWidth:'20px',opacity:'0.5',marginLeft:'300px'},3000);
});
$("button:eq(1)").click(function(){

	//원래대로
    $("#box1").animate({width:'-=100',borderWidth:'1px',opacity:'1',marginLeft:'0px'},3000);
});

animate() 배열 활용

여러개의 box2클래스들을 delay를 줘서 차례대로 이동하게 보이기

$(".box2").each(function(i,element){

	//delay(i*500) 0.5초 : 각 개체 0.5초마다 실행
    $(this).delay(i*500).animate({left:'+=300px'},'slow');
});

animate() 활용 - 없어졌다 나타나기

<!-- 이미지 사라졌다 잠시 멈춘다,다시 나타난다 -->
 $("#img1").fadeOut(2000).delay(2000).fadeIn(2000);

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
</head>
<body>
    <button type="button" class="btn btn-outline-success">애니메이션_#1</button>
    <button type="button" class="btn btn-outline-danger">애니메이션_#2</button>
    <div id="box1"></div>
    
    <script>
        $("#box1").css({

            "width":"100px",
            "height":"100px",
            "border":"1px solid red"
        });

        $("button:eq(0)").click(function(){

            //애니메이션_box1이 너비가 100씩 커지고 선 굵기가 20px 투명도 조절_3초동안,marginLeft:300px
            $("#box1").animate({width:'+=100',borderWidth:'20px',opacity:'0.5',marginLeft:'300px'},3000);
        });

        $("button:eq(1)").click(function(){

            //원래대로
            $("#box1").animate({width:'-=100',borderWidth:'1px',opacity:'1',marginLeft:'0px'},3000);
        });
    </script>
    <hr>

    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>
    <script>
        $(".box2").css({
            position:"relative", //absolute로 잡으면 안움직임
            width:"60px",
            height:'50px',
            backgroundColor:'tomato',
            marginTop:'10px'
        });

        $(".box2").each(function(i,element){

            //delay(i*500) 0.5초 : 각 개체 0.5초마다 실행
            $(this).delay(i*500).animate({left:'+=300px'},'slow');
        });
    </script>
    <hr>
    <img src="../연예인사진2/냥뇽녕냥12.jpeg" id="img1">

    <!-- 이미지 사라졌다 잠시 멈춘다,다시 나타난다 -->
    <script>
        $("#img1").fadeOut(2000).delay(2000).fadeIn(2000);
    </script>
</body>
</html>

on 메서드

on() 메서드
처음부터 존재하는 요소나 미래에 생겨난 요소에 대해서 모두
이벤트 가능 하다는 전제하에 사용
jquery: $("선택자").click(function(){}) -> 처음부터 생겨있으면 가능

on()사용법
$(document).on('click',지정자[id/name...=**],function(){})

:element(요소)가 나중에 동적으로 생성되더라도 이벤트가 걸린다

정적메서드/동적메서드 비교

정적메서드

<!-- 이전 방식 -->
<script>
	$("#add").click(function(){
    	$('body').append("<button id='add'>+</button>"); //향후에 생겨난 버튼이라 클릭해도 작동x
});
</script>

동적메서드

<!-- 동적이벤트방식 -->
<script>
방법1
	//향후에 생겨난 버튼에 클릭 이벤트 부여
    $(document).on("click","button",function(){
    	$('body').append("<button>+</button>");
    });

방법2
    // 위와 동일
    // 지정자[] 정의해주면 밑에 꺽쇠에도 지정자를 정의해줘야함
    // $(document).on("click","button[id='add']",function(){
    //     $('body').append("<button id='add'>+</button>");
    // });
</script>

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
</head>
<body>
    <!--on() 메서드
        처음부터 존재하는 요소나 미래에 생겨난 요소에 대해서 모두
        이벤트 가능 하다는 전제하에 사용
        jquery: $("선택자").click(function(){}) -> 처음부터 생겨있으면 가능

        on()사용법
        $(document).on('click',지정자[id/name...=**],function(){})
        :element(요소)가 나중에 동적으로 생성되더라도 이벤트가 걸린다
        -->
        <button type="button" id="add">+</button>

        <!-- 이전 방식 -->
        <script>
            $("#add").click(function(){
                $('body').append("<button id='add'>+</button>"); //향후에 생겨난 버튼이라 클릭해도 작동x
            });
        </script>

        <!-- 동적이벤트방식 -->
        <script>
            //향후에 생겨난 버튼에 클릭 이벤트 부여
            $(document).on("click","button",function(){
                $('body').append("<button>+</button>");
            });

            // 위와 동일
            // 지정자[] 정의해주면 밑에 꺽쇠에도 지정자를 정의해줘야함
            // $(document).on("click","button[id='add']",function(){
            //     $('body').append("<button id='add'>+</button>");
            // });
        </script>
</body>
</html>

on 메서드2

on 메서드 동적이벤트로 작동시키기

//정적클릭이벤트
$("#mylang").children().click(function(){
	$(this).remove();
});

//li를 이벤트로 추가(동적이벤트)해서 정적클릭이벤트로는 안지워짐
$("#mylang").append("<li>JQuery</li>");

-방법1
//동적클릭이벤트...append로 추가한 <li>JQuery</li> 클릭하면 지울 수 있게 해주기
$(document).on("click","li",function(){
	$(this).remove();
});
-방법2
// 동일한 동적클릭이벤트...e를 고스란히 물려줘서 e.target
// $(document).on("click","li",function(e){
//     $(e.target).remove();
// });

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <script>
        $(function(){

            //정적클릭이벤트
            $("#mylang").children().click(function(){
                $(this).remove();
            });

            //li를 이벤트로 추가(동적이벤트)해서 정적클릭이벤트로는 안지워짐
            $("#mylang").append("<li>JQuery</li>");

            //동적클릭이벤트...append로 추가한 <li>JQuery</li> 클릭하면 지울 수 있게 해주기
            $(document).on("click","li",function(){
                $(this).remove();
            });
            // 동일한 동적클릭이벤트...e를 고스란히 물려줘서 e.target
            // $(document).on("click","li",function(e){
            //     $(e.target).remove();
            // });
        });
    </script>
</head>
<body>
    <ul id="mylang">
        <li>Java</li>
        <li>oracle</li>
        <li>Jsp</li>
        <li>Mysql</li>
    </ul>
</body>
</html>

on메서드 응용

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        button{
            width: 120px;
            height: 40px;
            border-radius: 20px;
            font-size: '1.3em';
            font-family: 'Cute Font';
            cursor: pointer;
        }

        button.a{background-color: blueviolet; color: white;}
        button.b{background-color: green; color: lightgray;}
        button.c{background-color: blanchedalmond; color: black;}

        div{
            position: absolute;
            width: 300px;
            height: 150px;
            font-size: 20pt;
            font-family: "Dokdo";
        }

        #one{
            left: 100px;
            top: 100px;
        }

        #two{
            left: 300px;
            top: 100px;
        }

        #three{
            left: 700px;
            top: 100px;
        }

        #four{
            left: 1100px;
            top: 100px;
        }

        #result{
            left: 300px;
            font-size: 2em;
            text-align: center;
            width: 1000px;
            top: 500px;
            border: 3px solid green;
            border-radius: 30px;
            padding-top: 20px;
        }
        #three h3:hover{
            cursor: pointer;
            background-color: orange;
        }

        #inwon{
            margin-left: 10px;
            margin-top: 10px;
            font-family: '';
        }
    </style>
    <script>
        $(function(){

            var theater="",movie="",inwon="",time="";

            //#one버튼추가..btn1은 이벤트로 만든게 아니라서 정적이벤트 적용 가능
            var b="<button type='button' id='btn1' class='a'>영화예매</button>";
            $("#one").append(b);

            //버튼1이벤트..btn1은 이벤트로 만든게 아니라서 정적이벤트 적용 가능
            $("#btn1").click(function(){

                //btn2,3 이벤트로 생성 ... 동적이벤트로만 작동 가능
                var b2="<button type='button' id='btn2' class='b'>극장선택</button>";
                b2+="&nbsp;<button type='button' id='btn3' class='c'>영화선택</button>";
                $("#two").html(b2);
            });

            //버튼2 ... 정적이벤트로 작동되는지 확인/작동X
            // $("#btn2").click(function(){
            //     alert("클릭")
            // });

            //버튼2...동적이벤트
            $(document).on("click","#btn2",function(){
                
                var s="<h3 class='theater'>CGV강남점</h3>";
                s+="<h3 class='theater'>MEGABOX 청담</h3>";
                s+="<h3 class='theater'>MEGABOX 코엑스</h3>";
                s+="<h3 class='theater'>CGV 왕십리</h3>";

                $("#three").html(s);
            });

            //버튼3
            $(document).on("click","#btn3",function(){

                var s="<h3 class='movie'>범죄도시</h3>";
                s+="<h3 class='movie'>극한직업</h3>";
                s+="<h3 class='movie'>7번방의 선물</h3>";
                s+="<h3 class='movie'>죠스</h3>";
                s+="<h3 class='movie'>짱구는 못말려</h3>";

                $("#three").html(s);
            });

            //영화관,영화제목 클릭시 이벤트
            $(document).on("click","#three h3",function(){

                //클릭한 h3태그에서 class를 얻는다
                var select=$(this).attr("class");

                if(select=='theater')
                {
                    theater="극장명: "+$(this).text()+"<br>";
                    movie="";
                }
                else
                {
                    movie="영화명: "+$(this).text();
                
                    inwon="";
                    time="";
                    var tag="";

                    //인원수
                    tag+="<input type='number' min='1' max='5' value='0' id='inwon'><br>";
                
                    //시간
                    var times=["09:00","13:30","15:20","18:50","20:30"];
                    
                    $.each(times,function(i,elt){

                        tag+="<input type='radio' name='time' value='"+times[i]+"'>"+times[i]+"<br>";
                    });

                    $("#four").html(tag);
                }

                $("#result").html(theater+movie);

                //인원수이벤트
                $(document).on("change","#inwon",function(){
                    inwon="인원수: "+$(this).val();
                    $("#result").html(theater+movie+"<br>"+inwon+"<br>"+time);
                })

                //시간이벤트
                $(document).on("change","input[name='time']",function(){

                    time="상영시간: "+$(this).val();
                    $("#result").html(theater+movie+"<br>"+inwon+"<br>"+time);
                });
            });
        });
    </script>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="result"></div>
</body>
</html>

profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
이전 포스트

VS code-JQuery

다음 포스트

VS code - JQuery

0개의 댓글