Woopii Vyeolog

mouseover 시 slide 애니메이션을 가진 메뉴바 본문

html,css,js

mouseover 시 slide 애니메이션을 가진 메뉴바

WooPii 2020. 2. 12. 16:12 
<!DOCTYPE html>
<html leng="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>document</title>
        <style> 
            #slide, #panel {
                padding: 5px;
                text-align: center;
                background-color: #e5eecc;
                border: solid 1px #c3c3c3;
                width: 100%;
                height: 100%;
            }
            /* #penel의 스타일의 기본이 display:none으로 되어 있다.  */
            #panel {
                padding: 50px;
                display: none;
                background-color: #ffff00; 
            }
        </style>
    </head>
 
    <body>
        <!-- 메뉴바를 두 부분으로 나누고 마우스를 올릴곳과 나타날 곳을 만들고 이 둘을 묶을 div를 만든다. -->
        <div id="menu"  style="margin-top: 300px;">
            <!-- 마우스가 올라가는 부분 -->
            <div id="slide">메뉴바</div>
            <!-- 처음엔 안보였다 나중에 보이는 부분 -->
            <div id="panel">메뉴바 안의 내용을 넣습니다.<br></div>
        </div>

        <!-- 제이쿼리 가져옴 -->
        <script  src="https://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                // timer변수를 만들어 약간의 딜레이를 줄건데 딜레이가 없으면 마우스가 지나갈 때마다
                // 메뉴바가 나오고 사라지고 해서 눈에 거슬림 
                var timer;
                $("#slide").mouseenter(function(){      //#slide에 mouseenter이벤트를 만듬
                     timer = setTimeout(function() {       //딜레이를 설정하면서 (0.1초) 해당 시간 후에 아래와 같은 동작을 함 
                        $("#panel").not(':animated')        //에니메이션이 Queue에 쌓이는 것을 방지하기 위해서  not(':animated')설정을 해준다.
                        .css({color: "red"})                //css수정
                        .slideDown(500)                     //display가 none에서 block으로 바뀌면서 슬라이드 효과가 생기면서 보여지게 됨
                     }, 100);           
                })
                $("#menu").mouseleave(function(){       //#menu에 mouseleave이벤트를 만듬
                     clearTimeout(timer);               //위에서 딜레이를 설정하고 그 시간 안에 mouseleave 이벤트가 일어나면 해당 timer변수가 사라져서
                     $("#panel")                        //mouseenter이벤트 시의 동작이 일어나지 않음
                     .css({color: "blue"})              //css수정
                     .slideUp(500)                      //display가 none에서 block으로 바뀌면서 슬라이드 효과가 생기면서 보여지게 됨
                });
            });
        </script>
    </body>
</html>

'html,css,js' 카테고리의 다른 글

[HTML, JS] 간단하게 테스트 할 수 있는 API Client  (0) 2022.11.17
'html,css,js' Related Articles more
Comments