Coding_Beginner_JH

Coding 공부/Jquery

[Jquery] 이벤트(mousemove, mousedown), 애니메이션(show, hide, slideDown, slideUp, fadeToggle, fadeIn, fadeOut, animate, animate 효과

CBJH 2024. 4. 22.
728x90
반응형

1. 이벤트

  1.1 mousemove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <title>jquery</title>
    <style>   
        #position{
            width: 250px;
            height: 60px;
            background-color: lightgrey;
        }     
        #position>span{
            background-color: lightpink;
        }
    </style>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){            
            $(document).on('mousemove',function(e){
                $("#page-x>b").text(e.pageX) //page-x아이디의 자식 b에 접근해라.
                $("#page-y>b").text(e.pageY)
            })
        })        
    </script>
</head>
<body>
    <div id="position">
        <span id ="page-x">pageX: <b>0</b>px</span>
        <span id ="page-y">pageY: <b>0</b>px</span>
    </div>
</body>
</html>
  • mousemove 이벤트는 마우스 커서의 위치를 표시해준다.
  • text로 값을 반환한다.
  • 매개변수 e를 넣어 e.pageX는 마우스의 X좌표, e.pageY는 마우스의 Y좌표를 보여준다.

  1.2 mouseup, mousedown

<head>
    ~  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){            
            $(document).on({
                "mouseup":function(e){
                    console.log("mouseup!")
                },
                "mousedown":function(e){
                    console.log("mousedown!")
                }
            })
        })        
    </script>
</head>
  • mouseup은 좌클릭 하고난 후 클릭을 떼어낼 때 콘솔창에 mouseup!을 표시한다. 
  • mousedown은 좌클릭 했을 때 콘솔창에 mousedown!을 표시한다. 
<head>
    ~
    <style> 
    #my-div{
        width: 200px;
        height: 60px;
        background-color: antiquewhite;
    }
    </style>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){            
            $(document).on({
                "mouseup":function(e){
                    $("#my-div>span>b").text(e.type)
                },
                "mousedown":function(e){
                    $("#my-div>span>b").text(e.type)
                }                
            })
        })        
    </script>
</head>
<body>   
    <div id="my-div"><span>status: <b>0</b></span></div>
</body>
  • 마우스 클릭 상태를 웹 브라우저에 직접 출력하기 위해선 매개변수 e를 넣고 text 타입으로 e.type을 반환받으면 클릭의 상태를 표시해준다.

 

2. 애니메이션

 

2.1 버튼으로 show(), hide() 애니메이션 예제

<head>
    ~
    <style> 
        #my-div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){            
            $("#hide-btn").on('click',function(){
                $("#my-div").hide(2000)
            });
            $("#show-btn").on('click',function(){
                $("#my-div").show(2000)
            });        
        })        
    </script>
</head>
<body>   
    <button id="hide-btn">hide</button>
    <button id="show-btn">show</button>
    <div id="my-div"></div>
</body>

2.2 토글 버튼으로 show(), hide() 애니메이션 예제

<head>
    ~
    <style> 
        #my-div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){            
            $("#toggle-btn").on('click', function(){
                $("#my-div").toggle(2000)   //toggle은 클릭할때 마다 두가지 기능을 갖도록 되어있다. 무옵션이면 hide, show 메소드가 실행된다.
            })
        })        
    </script>
</head>
<body>   
    <button id="toggle-btn">toggle</button>
    <div id="my-div"></div>
</body>

 

2.3 버튼으로 slideDown(),slideUp() 애니메이션 예제

<head>
    ~
    <style> 
        #my-div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){            
            $("#slide-up-btn").on('click', function(){
                $("#my-div").slideUp(2000,function(){
                    alert('slideUp완료!')
                })
            });
            $("#slide-down-btn").on('click', function(){
                $("#my-div").slideDown(2000, function(){
                    alert('slideDown완료!')
                })
            });
        })        
    </script>
</head>
<body>   
    <button id="slide-up-btn">slideUp</button>
    <button id="slide-down-btn">slideDown</button>
    <div id="my-div"></div>
</body>

 

2.4 버튼으로 fadeToggle(), fadeIn(), fadeOut() 애니메이션 예제

<head>
    ~
    <style> 
        #my-div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){            
            $("#fade-toggle-btn").on('click', function(){
                $("#my-div").fadeToggle(2000, function(){
                    alert("fade-toggle 성공!")
                })
            });
        })        
    </script>
</head>
<body>   
    <button id="fade-toggle-btn">fadeToggle</button>
    <div id="my-div"></div>
</body>

 

<head>
~
<script>
        $(document).ready(function(){            
            $("#fade-to-btn1").on('click', function(){
                $("#my-div").fadeTo(2000, 0.2)	//2000ms동안 20% 선명도를 갖게 애니메이션.
            });
            $("#fade-to-btn2").on('click', function(){
                $("#my-div").fadeTo(400, 0.9)	//2000ms동안 90% 선명도를 갖게 애니메이션.
            });
        })        
    </script>
</head>
<body>   
    <button id="fade-in-btn">fadeIn</button>
    <button id="fade-out-btn">fadeOut</button>
    <div id="my-div"></div>
</body>

 

2.5 버튼으로 animate() 애니메이션 예제

<head>
    ~
    <style> 
        #my-div{
            position: relative;
            width: 100px;
            height: 100px;
            background-color:limegreen;
        }
    </style>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){            
            $("#animate-btn").on('click', function(){
                $("#my-div").animate({"left":"+=100px"}) //div가 position:static;이면 left해도 위치가 변하지 않는다.
            })
        })        
    </script>
</head>
<body>   
    <button id="animate-btn">animate</button>    
    <div id="my-div"></div>
</body>
  • animate() 매개변수에 중괄호와 쌍따옴표, 콜론을 이용해 입력해야된다. 오타 주의하기!
  • jquery문이기 때문에 "+=100px" 같은 수식을 문자열 안에 넣을 수 있다.

 

2.6 keyDown()으로 animate() 예제

<head>
    ~
    <style> 
        #my-div{
            position: relative;
            width: 100px;
            height: 100px;
            background: url("https://e7.pngegg.com/pngimages/242/320/png-clipart-face-smiley-wiki-kiss-smiley-people-desktop-wallpaper.png");
            background-size: cover;
            left: 0;             /* 초기 위치 설정 */
            top: 0;              /* 초기 위치 설정 */
        }
    </style>   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(document).on('keydown',function(e){
                switch(e.keyCode){                    
                    case 37: // Left arrow
                        $("#my-div").animate({"left": "-=100px"},100, 'swing'); // 왼쪽으로 이동, 100ms만에 이동, 'swing' 방식으로 animate
                        break;
                    case 38: // Up arrow
                        $("#my-div").animate({"top": "-=100px"},100, 'swing'); // 위로 이동                        
                        break;
                    case 39: // Right arrow
                        $("#my-div").animate({"left": "+=100px"},100, 'swing'); // 오른쪽으로 이동                        
                        break;
                    case 40: // Down arrow
                        $("#my-div").animate({"top": "+=100px"},100, 'swing'); // 아래로 이동                        
                        break;
                }
                $("#my-div-status").val(e.key);
            });
        });        
    </script>
</head>
<body>   
    <div id="my-div"></div>
    <input id="my-div-status" type="text" readonly>
</body>
  • animate()에는 다양한 동작 효과를 줄 수 있다.
  • 어떤 효과들이 있는지 궁금하다면 jQuery공작소 홈페이지를 참고하자. 링크: https://superkts.com/jquery/animate

 

3. slidedown() 애니메이션을 이용한 메롱 만들기 예제

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Character Animation</title>
    <style>
        .character-container {
            position: relative;
            width: 200px; /* 이미지 크기에 맞게 조정 */
            height: 200px; /* 이미지 크기에 맞게 조정 */
        }

        .character-image {
            width: 100%;
            height: auto;
            display: block;
        }

        .tongue {
            width: 90px;
            height: 60px;
            background-color: pink;
            border-radius: 100px 100px 0 0;
            position: absolute;
            bottom: 23px; /* 입 위치에 맞게 조정 */
            left: 47%; /* 중앙 정렬 */
            transform: translateX(-50%);
            display: none;
        }
    </style>
</head>
<body>
    <div class="character-container">
        <img src="https://e7.pngegg.com/pngimages/242/320/png-clipart-face-smiley-wiki-kiss-smiley-people-desktop-wallpaper.png" class="character-image" alt="Character">
        <div class="tongue"></div>
    </div>

    <button id="toggle-btn">Toggle</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- jQuery 추가 -->
    <script>
        $(document).ready(function(){            
            $("#toggle-btn").on('click', function(){
                $(".tongue").slideDown(2000),
                $(".tongue").slideUp(2000)
            });
        }) 
    </script>
</body>
</html>

  • 조금 어색하지만 작동은 한다!

 

4. 웹 디자인 기능사 연습

$(document).ready(function(){
    menu()
    tab()
    slide()
    popup()
})

function menu(){
    $(".gnb>li").on({
        "mouseenter":function(){
            $(".lnb").stop().slideDown()
            //stop은 지금 동작하는 애니메이션 멈춤
            //그러면 애니메이션 큐에 애니메이션 안쌓인다
            //그게 결국엔 애니메이션 자연스럽게하는 기능
        },
        "mouseleave":function(){
            $(".lnb").stop().slideUp()
        }
    })
}

function tab(){
    $(".tab_btn>a").eq(0).on('click',function(){    //eq(0) 첫번째 자식요소
        // alert('공지사항 버튼 클릭!')
        $(".tab_contents>div").eq(1).hide()
        $(".tab_contents>div").eq(0).show()
    }),
    $(".tab_btn>a").eq(1).on('click',function(){    //eq(1) 두번째 자식요소
        // alert('갤러리 버튼 클릭!')
        $(".tab_contents>div").eq(0).hide()
        $(".tab_contents>div").eq(1).show()
    })
}

function slide(){
    setInterval(slideMove, 3000)
}
var curTop=0
function slideMove(){
    curTop-=300
    if(curTop < -600){
        curTop=0
    }
    $("#slide_contents").animate({"top":curTop})
    //0, -300, -600, 0, -300, -600
}

function popup(){
    $(".pop").on('click',function(){
        $("#popup").show()
    })
    $("#closeBtn").on('click',function(){
        $("#popup").hide()
    })

}
  • menu창 마우스를 올려 놓으면 슬라이드 다운으로 세부메뉴 보이기
  • tab 버튼 클릭하면 해당 탭 show(), hide()로 원하는 탭만 보이기
  • slide를 setInterval로 몇초마다 이동 시킬지 정하기, animate({"top":"-=300px"})로 이동시키기
  • popup창 클릭하면 show하고 close버튼 누르면 hide하기

'Coding 공부 > Jquery' 카테고리의 다른 글

[Jquery] bxslider, Cookie, Ajax, yts 사이트 api 활용, Pagingnation vs Infinite Scrolling, Jquery each메서드  (1) 2024.04.26
[Jquery_mini_project] Racing_game  (0) 2024.04.15
[Jquery] 체이닝, on(), val(), click(), mouseenter, mouseleave, hover, scroll(), blur(), keydown()  (0) 2024.04.15
[Jquery] attr, checkbox, class(addClass, removeClass, hasClass, toggleClass)  (2) 2024.04.12
[Jquery] ready, 접근 지정자(parent, child, prev, next, even, odd), getter, setter, 함수 실행  (0) 2024.04.08

볼 만한 글

댓글

티스토리툴바