Jam's story

[JQuery] hide 본문

WEB/JQuery

[JQuery] hide

애플쩀 2022. 6. 10. 16:00

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

 

.hide() | jQuery API Documentation

Description: Hide the matched elements. With no parameters, the .hide() method is the simplest way to hide an element: 1 The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), ex

api.jquery.com

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.10 15:41:51</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex04.html</h3>

<button id="btn1">show</button>
<button id="btn2">toggle</button>

<p>Lorem, ipsum dolor.</p>
<p>Aut, deleniti sit!</p>
<p>Aliquid, labore amet?</p>
<p>Voluptas, aspernatur dolorum?</p>
<p>Enim, temporibus dolore.</p>

<pre>
    다음주 월- jquery selector (선택자)
            -action()
    1.jQuery 효과


    [jquery Effects]

basics - hide, show, toggle
custom
fading
sliding

jQuery 함수
show([duration], [complete]) 애니메이션 시간 (디폴트400).
show([complete]) 완전히 처리된 후 함수.
toggle([speed], [callback]) 시간과 함수.

</pre>

<script>
    $(function(){
        $("#btn2").click(function(){
            $("p").toggle(1000,function(){
                console.log("toggle() 메소드 추가");
            });
        });
        $("#btn1").click(function(){
            $("p").show(1000,function(){
                console.log("show() 메소드 추가");
            });
        });
    });
</script>


<script>
    $(function(){
        $("p").click(function(){

            $(this).hide(1000);
            // $(this).hide(600)은 $(this).hide("slow"); 와 같다.

            $(this).hide("slow",function(){ //complete -> 콜백함수
                alert("숨김작업이 완료된 후에 호출되는 함수 ")
            });
        });
    });
</script>
</body>
</html>
2022.06.10 15:41:51

ex04.html

Lorem, ipsum dolor.

Aut, deleniti sit!

Aliquid, labore amet?

Voluptas, aspernatur dolorum?

Enim, temporibus dolore.

    다음주 월- jquery selector (선택자)
            -action()
    1.jQuery 효과


    [jquery Effects]

basics - hide, show, toggle
custom
fading
sliding

jQuery 함수
show([duration], [complete]) 애니메이션 시간 (디폴트400).
show([complete]) 완전히 처리된 후 함수.
toggle([speed], [callback]) 시간과 함수.

'WEB > JQuery' 카테고리의 다른 글

[JQuery] Slide  (0) 2022.06.10
[JQuery] Fade  (0) 2022.06.10
[JQuery] on() 메소드  (0) 2022.06.10
[JQuery] 메뉴클릭하면 글이 나오도록  (0) 2022.06.06
[JQuery] < ,> 버튼 과 목차버튼으로 이미지 넘기기  (0) 2022.06.06
Comments