Jquery[제이쿼리] show(),hide(),toggle() 배우기

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery] show(),hide(),toggle() 배워보도록하겠습니다.

위화면처럼 셋팅해주세요~

오늘은 준비가 조금 많네요 ㅎㅎ

실행 화면입니다. ㅎㅎ

===============================
$('.img_show').click(function(){
   $('img').show();
===============================
class 'img_show' 가 click 마우스로 클릭되면
<img>태그를 show 보이도록 하라입니다. 





===============================  
  $('.img_hide').click(function(){
   $('img').hide();
===============================
class 'img_hide' 가 click 마우스로 클릭되면
<img>태그를 hide 안보이도록 하라입니다. 

실행을하면 처음에는 그대로지만.....

class이름이  'img_hide'인 "이미지야 사라져랏!" 마우스로 클릭 하시면 이미지가 사라진답니다.ㅎㅎ

다시 이미지가 보이게 "이미지야 나타나랏!" 마우스로 클릭 하시면 다시나와요 ㅎㅎ

===============================  
 $('h2').click(function(){
   $('li').toggle(); 
===============================
<h2>태그가 click 마우스로 클릭 되면 
<li>태그가 toggle 실행
※ toggle()는 보일때는 안보이게 / 안보일떄는 보이게 해주는 녀석이랍니다.
메뉴아래에 있는 내용을 보이게/안보이게 할때 많이사용한답니다.

실행하면 그대로이겠죠?ㅎㅎ

<h2>태그인 "안녕하세요.주니주니입니다." 를 누르면 아래에있는 
<li>태그들이 안보이게

다시 누르면 안보이던 <li>태그들이 다시 보이게 된답니다.

따라 실행해보신분들은 갑자기 사라지고 생겨서 먼가 어색하다고 느끼시는 분들이 있을꺼라고 생각해요
그런분들을 위해 효과를 조금 넣어볼께요 위에 처럼 'slow'를 넣어주세요!!
그러면 천천히 사라지고 천천히 생긴답니다.!!

오늘은 제이쿼리[jquery] show(),hide(),toggle() 배워봤습니다.
그럼 다음에 또만나요~