웹/제이쿼리 JSTL

제이쿼리(jQurey) - 효과 및 애니메이션 메소드

은은하게미친자 2022. 11. 14. 14:58
728x90

효과메서드

- 요소를 역동적으로 숨겻다 보이도록 해주는 메서드가 있고,

$(요소 선택).효과 메소드(효과 소요 시간, 가속도, 콜백 함수)

 

애니메이션 메소드

- 선택한 요소에 동작을 적용시킬 수 있습니다.

$(요소 선택).animatie({ 애니메이션에 적용할 속성과 값}, 가속도, 콜백함수);

 

* 효과 메서드 예제 : 버튼을 누를때 마다 아래 div가 보여졋다/ 사라졋다 반복하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        // $(function(){
        //     $(".btn2").on("click", function(){
        //         $(".wrap").css({display:"none"});
        //     });
        // });
 
        $(function(){
            $(".btn2").on("click", function(){
                var state = $(this);
 
                if (state.text() == "숨김"){
                    $(".wrap").slideUp(1000, function(){
                        $(".btn2").text("노출");
                    });
                } else {
                    $(".wrap").slideDown(1000, function(){
                        $(".btn2").text("숨김");
                    });
                }
 
            });
        });
 
    </script>
</head>
<body>
    <p class="btnWrap">
        <button class="btn2">숨김</button>
    </p>
 
    <div class="wrap">
        <p class="txt1"> 내용1 </p>
        <p class="txt1"> 내용2 </p>
    </div>
</body>
</html>
 
 cs

 

* 애니메이션 메소드 예제 :  go/ back 버튼 누를 때마다 이동

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(function(){
            var txt1 = $(".txt1");
            var cnt = 1;
 
            //backBtn 를클릭했을때
            $(".btnWrap button").on("click",function(){
                var ts =$(this);
 
                if (ts.hasClass("backBtn")){
                    cnt--;
 
                    if (cnt < 1){
                        cnt =1;
                        return;
                    }
                    txt1.animate({marginLeft:"-=10%"},500);
                } else {
                    cnt++;
                    if(cnt > 10 ){
                        cnt=10;
                        return;
                    }
                    txt1.animate({marginLeft:"+=10%"},500);
                }
                console.log( cnt);
            });
 
        });
    </script>
<style>
    *{margin:0;padding:0;}
    body{padding:20px}
    .btnWrap{margin-bottom: 10px;}
    .wrap{
        max-width: 600px;
        border: 1px solid #000;
    }
    .txt1{width: 10%; text-align: center;
        background-color: aqua;
    }
</style>
</head>
<body>
    <p class="btnWrap">
        <button class="backBtn">Back</button>
        <button class="goBtn">go</button>
    </p>
 
    <div class="wrap">
        <p class="txt1"> >.< </p>
    </div>
</body>
</html>
 
 cs

 

728x90