[jQuery] 3. 앨리먼트를 숨기거나 보여주는 방법. (hide, show)

해당 강의의 저작권은 Pure Ani's Blog의 주인장 Pure Ani에게 있습니다.

이번에는 앨리먼트를 숨기고 보여주는 방법을 알아보겠습니다.

일단 숨기는 방법에는 hide(옵션)이 있고, 보여주는 방법에는 show(옵션)이 있습니다.

옵션에는 "slow", "nomal", "fast"와 ms(1초의 경우 1000)가 있습니다.

예시입니다.

HTML코드는 "<div id="abc">abc</div>"를 그대로 사용합니다.

$("#abc").hide("slow").show("slow");

실행을 해보시면 글자가 사라졌다가 나타나는것을 볼 수 있습니다.

이전강의와 응용을 해보자면.

이런게 있습니다.

        $("#abc").click(function(){
            $(this).hide("slow").show("slow");
        });

abc라는 글자를 클릭하면, 글자가 사라졌다가 나타납니다.

hover와 응용을 하자면..

        $("#abc").hover(
            function(){
                $(this).hide("slow");
            },
            function(){
                $(this).show("slow");
            }
        );

이렇게 되겠지요.

텍스트보다는 이미지를 가지고 테스트 하시면 더 정확하게 보실 수 있을거라 생각합니다.

마우스를 가져다대면 글자가 사라지고, 마우스를 밖으로 빼면 글자가 나타납니다.

출처 : Pure Ani's Blog