JQuery animation (이미지에 대해 다양한 효과)

<최종 화면> 이미지에 대해서 다양한 애니메이션 효과 주기

우선 10개의 버튼과 이미지를 준비하자.

show, hide, toggle효과에 대해 알아보자.

fadein, fadeout, fadeto 효과에 대해 알아보자.

slideup, slidedown, slideToggle효과를 알아보자. 그리고 여러가지 효과를 한꺼번에 줄 수 도 있다.

<복붙용 코드>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
 
    <!-- JQuery 추가 -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 
    <script>
        $(document).ready( function(){
 
            //duration: ms값, or 키워드[ slow: 600ms, 기본: 400ms fast: 200ms ]
            $('#show').click( function(){
                $('img').show("slow");
            });
            $('#hide').click( function(){
                $('img').hide(3000); // 3000ms
            });
            $('#toggle').click( function(){
                $('img').toggle("fast"); // 200ms
            });
            $('#fadein').click( function(){
                $('img').fadeIn(5000); //점점 보여진다.
                alert('animation complete');
            });
            $('#fadeout').click( function(){
                $('img').fadeOut(5000); //점점 투명해져서 안보인다.
            });
            $('#fadeto').click( function(){
                $('img').fadeTo(2000, 0.5); //0.5까지만 투명해지도록
            });
 
            $('#slideup').click( function(){
                $('img').slideUp("slow");
            });
            $('#slidedown').click( function(){
                $('img').slideDown("slow");
            });
            $('#slideToggle').click( function(){
                $('img').slideToggle("slow");
            });
            $('#all').click( function(){
                $('img').show("slow").fadeOut('slow').slideDown('slow');
            });
        });
    </script>
</head>
<body>
 
    <p>
        <button id="show">show</button>
        <button id="hide">hide</button>
        <button id="toggle">toggle</button>
        <button id="fadein">fadein</button>
        <button id="fadeout">fadeout</button>
        <button id="fadeto">fadeto</button>
        <button id="slideup">slideup</button>
        <button id="slidedown">slidedown</button>
        <button id="slideToggle">slideToggle</button>
        <button id="all">show+fade+slide</button>
    </p>
 
    <img src="./ms17.png" width="200">
    
</body>
</html>
 
 

저작자표시

'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > JQuery' 카테고리의 다른 글

jquery에서 ajax 사용 메소드 [ get(), post(), ajax(), load() ] (0)	2019.12.18
ajax 이용 X 와 ajax 이용O 비교 (GET, POST 방식) (0)	2019.12.18
Jquery dom 요소 제어 (0)	2019.12.18
JQuery animate (이미지를 이동, 투명도, 크기 변경) (0)	2019.12.18
jQuery 적용하기 (파일 다운로드, CDN 방식) (0)	2019.12.18