본문 바로가기
J-Query

03. hide & show, Fade effect, Slide

인표 2024. 3. 24. 14:02

Speed : milliseconds, slow, fast
Easing : swing(가속), linear(평균)
Callback : 효과가 끝나고 실행할 기능

 

 

1. hide & show

 

 

Hide - 해당 요소를 사라지게 하는 기능 (display : none)

 

Show - 해당 요소를 보이게 하는 기능 (display : block)

 

Toggle - 두 기능을 번갈아가며 실행

 

 

 

$(...).hide(speed, callback);

$(...).show(speed, callback);

$(...).toggle(speed, easing, callback);

 

Speed : milliseconds, slow, fast
Easing : swing(가속), linear(평균)
Callback : 효과가 끝나고 실행할 기능

 

 

 

<html>
    <head>
        <meta charset="UTF-8">
        <title>J-QUERY</title>
        <link rel="icon" href="../img/chrome.png">
        <!--Content Delivery Network 방식-->
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <style>
            div.menu{
                width: 100px;
                padding: 10 0;
                background-color: green;
                text-align: center;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="menu">메뉴 1</div>
        <ul>
            <li>LIST 01</li>
            <li>LIST 02</li>
            <li>LIST 03</li>
            <li>LIST 04</li>
            <li>LIST 05</li>
        </ul>
        <hr/>
        <button>OFF</button>
        <div>
            <p>LIST 01</p>
            <p>LIST 02</p>
            <p>LIST 03</p>
            <p>LIST 04</p>
            <p>LIST 05</p>
        </div>
    </body>
    <script>
        $('ul').hide();
        $('div.menu').hover(function(){
            $('ul').show(1000);
        },function(){
            $('ul').hide(1000);
        });

        $('button').click(function(){ 
            $('p').toggle(1000,function(){
                //console.log('call');
                var sw = $('p').css('display');
                if(sw == 'block'){
                    $('button').html('OFF');
                }else{
                    $('button').html('ON');
                }
            });
        });

    </script>
</html>

 

 

 

 

 

2. Fade effect

 

 

fadeIn() : 서서히 나타나는 효과

 

fadeOut() : 서서히 사라지는 효과

 

fadeToggle() : 위 두개의 효과를 토글

 

fadeTo() : opacity 조정

 

$(셀렉터).fadeIn(speed, callback);

$(셀렉터).fadeOut(speed, callback);

$(셀렉터).fadeToggle(speed, callback);

$(셀렉터).fadeTo(speed, opacity, callback);

 

Speed : milliseconds, slow, fast
Opacity : 도달할 투명도 수치
Callback : 효과가 끝나고 실행할 기능

 

 

<html>
    <head>
        <meta charset="UTF-8">
        <title>J-QUERY</title>
        <link rel="icon" href="../img/chrome.png">
        <!--Content Delivery Network 방식-->
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <style>
            div{
                width: 150;
                height: 150;
                background-color: green;
                margin-top: 10px;
                display: none;
            }
        </style>
    </head>
    <body>
        <button id="viz">fadeIn</button>
        <button id="inviz">fadeOut</button>
        <button id="togle">ON</button>
        <div></div>
        <br/>
        <img src="../img/chrome.png" width="150px"/>
    </body>
    <script>
        //fadeIn
        $('#viz').click(function(){
            $('div').fadeIn('slow',check);//slow|fast
        });
        
        //fadeOut
        $('#inviz').click(function(){
            $('div').fadeOut('slow',check);//slow|fast
        });

        //fadeToggle
        $('#togle').on('click',function(){
            $('div').fadeToggle('slow',check);
        });

        function check(){
            if($('div').css('display') == 'none'){
                $('#togle').html('ON');
            }else{
                $('#togle').html('OFF');
            }
        }

        // 지정한 opacity 만큼만 투명해 진다.
        $('img').hover(function(){
            $(this).fadeTo('slow',0.2);
        },function(){
            $(this).fadeTo('slow',1);
        });


    </script>
</html>

 

 

 

 

 

3. Slide

 

 

slideUp() : 요소가 아래서 위로 크기가 작아지며 사라지는 효과


slideDown() : 요소가 위에서 아래로 크기가 커지며 나타나는 효과


slideToggle() : 위 두 개의 효과를 토글

 

 

$( ... ).slideDown(speed, callback);

$( ... ).slideUp(speed, callback);

$( ... ).slideToggle(speed, callback);

 

Speed : milliseconds, slow, fast
Callback : 효과가 끝나고 실행할 기능

 

 

<html>
    <head>
        <meta charset="UTF-8">
        <title>J-QUERY</title>
        <link rel="icon" href="../img/chrome.png">
        <!--Content Delivery Network 방식-->
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <style>
            div{
                text-align: center;
                background-color: yellowgreen;
                border: 1px solid green;
                padding: 5px;
                margin: 2px;
                cursor: pointer;
            }

            div.panel{
                padding: 50 0;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="flip">메뉴1</div>
        <div class="panel">서브메뉴</div>

        <div id="flip2">메뉴2</div>
        <div class="panel">서브메뉴</div>
    </body>
    <script>
        //slideDown(speed,callback) : 아래로 커지면서 나타남
        //slideUp(speed,callback) : 위로 작아지면서 사라짐
        //slideToggle(speed,callback)
        /*
        $('#flip').hover(function(){
            $(this).next().slideDown('slow');
        },function(){
            $(this).next().slideUp('slow');
        });
        */

        $('#flip').on('mouseenter',down);

        $('#flip').on('mouseleave',function(){
            $('#flip').off('mouseenter');
            $(this).next().slideUp('slow',function(){
                $('#flip').on('mouseenter',down);
            });
        });

        function down(){
            $(this).next().slideDown('slow');
        }

        $('#flip2').on('click',function(){
            $(this).next().slideToggle('fast');
        });

    </script>
</html>

 

'J-Query' 카테고리의 다른 글

05. 요소 추가, 요소 삭제, 요소 면적  (0) 2024.03.24
04. Animate, Method Chainin  (0) 2024.03.24
02. Event 등록, GET, SET, CSS, AddClass  (0) 2024.03.24
01. J-Query의 기초  (0) 2024.03.11

'J-Query' Related Articles

티스토리툴바