본문 바로가기
javascript, framework/jquery

step05_effect (사라졌다 나타나는 효과들)

bono.html 2022. 9. 16. 11:01

 

step05_effect 

.show .hide .toggle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Step05_effect.html</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<button id="hideBtn">숨기기</button>
<button id="showBtn">보이기</button>
<button id="toggleBtn">토글</button>
<div class="box"></div>
<script src="js/jquery-3.4.1.js"></script>
<script>
    //숨기기 버튼을 눌렀을때 div 를 숨겨 보세요.
    $("#hideBtn").on("click", function(){
        //$(".box").css("display","none");
        $(".box").hide();
    });

    //보이기 버튼을 눌렀을때 
    $("#showBtn").click(function(){
        $(".box").show();
    });

    //토글 버튼을 눌렀을때
    $("#toggleBtn").click(function(){
        $(".box").toggle();
    });
</script>    
</body>
</html>

step05_effect2

.hide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Step05_effect2.html</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<button id="hideBtn">숨기기</button>
<button id="showBtn">보이기</button>
<button id="toggleBtn">토글</button>
<div class="box"></div>
<script src="js/jquery-3.4.1.js"></script>
<script>
    //숨기기 버튼을 눌렀을때 div 를 숨겨 보세요.
    $("#hideBtn").on("click", function(){
        //$(".box").hide();
        //$(".box").hide(1000);
        // $(".box").hide(1000, function(){
        //     //1초후에 호출되는 함수
        //     alert("뿅~");
        // });
        $(".box").hide({
            duration: 1000,
            complete: function(){
                alert("뿅~");
            }
        });
    });

    //보이기 버튼을 눌렀을때 
    $("#showBtn").click(function(){
        $(".box").show(500);
    });

    //토글 버튼을 눌렀을때
    $("#toggleBtn").click(function(){
        $(".box").toggle();
    });
</script>    
</body>
</html>

.hide를 활용하여 duration과 alert 기능을 추가하였다. 이렇듯 숫자 혹은 메소드를 안에 적어 활용하는 경우가 있다.

.hide 관련 정보

https://api.jquery.com/hide/#hide

 

 

step05_effect3

fadeIn fadeOut fadeToggle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Step05_effect3.html</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<button id="hideBtn">숨기기</button>
<button id="showBtn">보이기</button>
<button id="toggleBtn">토글</button>
<div class="box"></div>
<script src="js/jquery-3.4.1.js"></script>
<script>
    //숨기기 버튼을 눌렀을때 div 를 숨겨 보세요.
    $("#hideBtn").on("click", function(){
       $(".box").fadeOut(1000, function(){
           alert("뿅~");
       });
    });

    //보이기 버튼을 눌렀을때 
    $("#showBtn").click(function(){
       $(".box").fadeIn({
           duration: 500,
           complete: function(){
            alert("짠!");
           }
       });
    });

    //토글 버튼을 눌렀을때
    $("#toggleBtn").click(function(){
       $(".box").fadeToggle();
    });
</script>    
</body>
</html>

 

 

step05_effect4

slideIn slideOut slideToggle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Step05_effect4.html</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<button id="hideBtn">숨기기</button>
<button id="showBtn">보이기</button>
<button id="toggleBtn">토글</button>
<div class="box"></div>
<script src="js/jquery-3.4.1.js"></script>
<script>
    //숨기기 버튼을 눌렀을때 div 를 숨겨 보세요.
    $("#hideBtn").on("click", function(){
       $(".box").slideUp(1000, function(){
           alert("뿅~");
       });
    });

    //보이기 버튼을 눌렀을때 
    $("#showBtn").click(function(){
       $(".box").slideDown({
           duration: 500,
           complete: function(){
            alert("짠!");
           }
       });
    });

    //토글 버튼을 눌렀을때
    $("#toggleBtn").click(function(){
       $(".box").slideToggle();
    });
</script>    
</body>
</html>

 

 

 

저작자표시 (새창열림)

'javascript, framework > jquery' 카테고리의 다른 글

Step09_example  (0) 2022.09.16
Step08_regExp(정규표현식 활용 예제)  (0) 2022.09.16
Step07_form (폼)  (0) 2022.09.16
Step06_animate (트랜지션, 이동)  (0) 2022.09.16
Step01~04 (html, css 접근, event)  (0) 2022.09.16

'javascript, framework/jquery' Related Articles

티스토리툴바