[jQuery] jQuery 효과 (Show/Hide, Fade, Slide, Callback)

[jQuery] jQuery 효과 (Show/Hide, Fade, Slide, Callback)

2022. 6. 13. 13:43ㆍJavaScript/jQuery

1. jQuery 효과

jQuery는 선택자로 선택된 태그를 사라지게 하거나 나타나게 할 수 있습니다. 이 때, 몇가지 효과를 제공하고 있음

2. hide/show

hide : 선택된 태그를 사라지게 한다
show : 선택된 태그를 나타나게 한다
toggle : 사라지거나 나타나는 상태를 전환한다
hide(시간), show(hide), toggle(시간) : 지정된 시간만큼 애니메이션 효과가 나타난다.
- 시간 : 밀리초 단위
시간은 “slow”라는 문자열을 넣어주면 적당히 느린 시간, “fast”를 넣어주면 적당히 짧은 시간이 설정된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function div_hide(){
        // $("#a1").hide();
        // $("#a1").hide(1000);
        // $("#a1").hide("slow");
        $("#a1").hide("fast");
    }
    function div_show(){
        // $("#a1").show();
        // $("#a1").show(1000);
        // $("#a1").show("slow");
        $("#a1").show("fast");
    }
    function div_toggle(){
        // $("#a1").toggle();
        // $("#a1").toggle(1000);
        // $("#a1").toggle("slow");
        $("#a1").toggle("fast");
    }
</script>
<style>
    #a1{
        border: 1px solid black;
        background-color: yellow;
        width: 200px;
        height: 200px;
    }
</style>
</head>
<body>
    <button onclick="div_hide()">hide</button>
    <button onclick="div_show()">show</button>
    <button onclick="div_toggle()">toggle</button>
    <div id="a1"></div>
</body>
</html>

위 결과에서 hide를 누르면 노란색 박스가 없어지고 show 박스를 누르면 노란색 박스가 다시 나타납니다. toogle 버튼을 눌렀을때 노란색 박스가 존재하면 hide하고 노란색 박스가 없다면 show합니다.

3. fade in, fade out

fadeIn : 페이드 효과를 통해 나타나게 됨
fadeOut : 페이드 효과를 통해 사라지게 됨
faseToggle : 페이드 효과를 통해 사라지거나 나타나는 상태를 전환함
fadeTo : 지정된 투명도 만큼 페이드 아웃함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function div_fadeOut(){
        $("#a1").fadeOut("slow");
    }
    function div_fadeIn(){
        $("#a1").fadeIn("slow");
    }
    function div_fadeToggle(){
        $("#a1").fadeToggle("slow");
    }
    function div_fadeTo(){
        $("#a1").fadeTo("slow", 0.3);
    }
</script>
<style>
    #a1{
        border: 1px solid black;
        background-color: yellow;
        width: 200px;
        height: 200px;
    }
</style>
</head>
<body>
    <button onclick="div_fadeOut()">fade out</button>
    <button onclick="div_fadeIn()">fade in</button>
    <button onclick="div_fadeToggle()">fade toggle</button>
    <button onclick="div_fadeTo()">fade to</button>
    <div id="a1"></div>
</body>
</html>

fade out 버튼 클릭 : 노란색 박스가 사라짐
fade in 버튼 클릭 : 노란색 박스가 나타남
fade toggle 버튼 클릭 : 노란색 박스가 사라지거나 나타남
fade to 버튼 클릭 : 노란색 박스가 특정 수치만큼 투명해짐

4. slide down/slide up

slideUp : 위로 슬라이드 되면서 사라짐
slideDown : 아래로 슬라이드 되면서 나타남
slideToggle : 슬라이드 효과를 통해 사라지거나 나타나는 상태를 전환함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function div_slideUp(){
        $("#a1").slideUp("slow");
    }
    function div_slideDown(){
        $("#a1").slideDown("slow");
    }
    function div_slideToggle(){
        $("#a1").slideToggle("slow");
    }
</script>
<style>
    #a1{
        border: 1px solid black;
        background-color: yellow;
        width: 200px;
        height: 200px;
    }
</style>
</head>
<body>
    <button onclick="div_slideUp()">slideUp</button>
    <button onclick="div_slideDown()">slideDown</button>
    <button onclick="div_slideToggle()">slideToggle</button>
    <div id="a1"></div>
</body>
</html>

slideUp 버튼 클릭시 : 노란색 박스가 위로 말려들어가면서 사라짐
slideDown 버튼 클릭시 : 노란색 박스가 위에서 아래로 나타남
slideToggle 버튼 클릭시 : 노란색 박스가 사라지거나 나타남

5. callback 함수

앞서 살펴본 효과가 종료되면 자동으로 호출되는 함수를 등록할 수 있음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function div_hide(){
        $("#a1").hide("slow", function(){
            alert("animation end");
        });
    }
</script>
<style>
    #a1{
        border: 1px solid black;
        background-color: yellow;
        width: 200px;
        height: 200px;
    }
</style>
</head>
<body>
    <button onclick="div_hide()">hide</button>
    <div id="a1"></div>
</body>
</html>

Reference

source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/Effect/src/main/webapp
윤재성의 처음 시작하는 jQuery Programming

'JavaScript > jQuery' 카테고리의 다른 글

[jQuery] Ajax(Asynchronous JavaScript and XML) (0)	2022.06.14
[jQuery] 애니메이션(Animation) (0)	2022.06.14
[jQuery] 태그 탐색 2 (siblings, next, prev) (0)	2022.06.13
[jQuery] 태그 탐색 1 (parent, child) (0)	2022.06.13
[jQuery] CSS 제어 (0)	2022.06.13

김용환 블로그