[    JQuery 애니메이션 관련 정리(fadeIn,fadeOut,hide,show,animate,stop)    ]



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
64
65
66
67
68
<!DOCTYPE html>
 
  <head>
    <meta charset="utf-8">
    <title>animate 관련...</title>
  </head>
   
    <button type="button" id="button1">BTN1</button>
    <p id="p1">BTN1</p>
    <button type="button" id="button2">BTN2</button>
    <p id="p2">BTN2</p>
    <button type="button" id="button3">BTN3</button>
    <p id="p3">BTN3</p>
    <button type="button" id="button4">BTN4</button>
    <p id="p4">BTN4</p>
    <button type="button" id="button5">BTN5</button>
    <p id="p5">BTN5</p>
    <button type="button" id="button6">BTN5</button>
 
 
    <script type="text/javascript">
      // 1. $(선택자).hide(ms) : ms 시간에 걸쳐 사라짐(효과는 없음)
      $("#button1").on("click",function(event){
        $("#p1").hide(200);
      });
      // 2. $(선택자).show(ms) : ms 시간에 걸쳐 나타나게 함(효과 X)
      $("#button1").on("click",function(event){
        $("#p1").show(200); // 0.2초에 걸쳐 나타남
      })
      // 3. $(선택자).toogle(ms) : ms초에 걸쳐 hide상태면 show하고 show상태면 hide상태로 바꿈
      $("#button1").on("click",function(event){
        $("#p1").toogle(200);
      })
      // 4. $(선택자).fadeIn(ms) : ms 초에 걸쳐 점차적으로 나타남(효과가 O)
      $(document).on("click","#button2",function(event){
        // 동적으로 태그를 생성시에는 이런식으로 이벤트를 줘야함(그냥 써밧음...)
        $("#p2").fadeIn(2000); // 2초에 걸쳐 점차적으로 나타남
      })
      // 5. $(선택자).fadeOut(ms) : ms 초에 걸쳐 사라짐(효과O)
      $("#button2").on("click",function(event){
        $("#p2").fadeOut(2000);
      });
      // 6. $(선택자).fadeTo(ms,0~1) : ms동안 0~1 사이의 opacity(투명도) 상태가 됨 1은 완전히 보임 0은 아예 안보임
      $("#button3").on("click",function(event){
        $("#p3").fadeTo(2000,0.3);
      })
      // 7. $(선택자).slideDown(ms) : ms초에 걸쳐 펼쳐지듯이 나타남
      $("#button4").on("click",function(event){
        $("#p4").slideDown(2000);
      })
      // 8. $(선택자).slideUp(ms) : ms초에 걸쳐 접히는 효과로 사라짐
      $("#button4").on("click",function(event){
        $("#p4").slideUp(2000);
      })
///////////////////////////////////////////////////////////////////////////////////////////////
 
      // 9. $(선택자).animate({css속성},ms) : ms초에 걸쳐 css 속성을 지정된 걸 차츰 적용함(애니메이션 효과)
      $("#button5").on("click",function(event){
        $("#p5").animate({margin-left:250px,color:red},5000).animate({margin-left:0px},3000);
      });
 
      // 10. $(선택자).stop() : 수행중인 애니메이션 효과를 정지시킴
      $("#button6").on("click",function(event){
        $("#p5").stop();
      });
 
    </script>
  


+ Recent posts