show & hide

hide() : ()감추는 기능

기본 :.hide('slow')

값 :  slow, no marl, fast, speed(1000,2000….)

$(document).ready(function(){

$('.message').hide();

      });

//.message의 값을 감추어 줍니다.

show() : ()보여주는 기능

기본 :.show('slow')

값 :  slow, no marl, fast, speed(1000,2000….)

$(document).ready(function(){

$('.message').show();

      });

//.message의 값을 보여줍니다.

show&hide 동시 응용(.toggle로 대체될 수 있습니다)

ex1)버튼 클릭으로 텍스트의 감춤과 보임

$(document).ready(function(){

$('.message').show();

$(this).text('보여집니다');

}, 

function(){

$('.message').hide(slow);

$(this).text('감춰줍니다');

 });

 

// 버튼을 클릭하면 .message값을 this 값인 text '보여집니다'가 화면에 나타나고

버튼을 다시 클릭하면 .message값을 this 값인 text '감춰줍니다'가 화면에서 서서히 사라집니다. 

 

toggle() : hide와 show의 기능을 번갈아 가며 감추거나 보여줌

기본 :.toggle('slow')

값 :  slow, no marl, fast, speed(1000,2000….)

$('#button').click(function(){

$('p').toggle('slow',function(){

});

      });

// 버튼을 클릭하면 p값을 천천히 보여주거나 감춤

fadeIn() : 선택된 앨리먼트를 불투명하게 표시

기본 :.fadeIn('slow')

값 :  slow, no marl, fast, speed(1000,2000….)

$('#button').click(function(){

$('p').toggle('slow',function(){

});

      });

// 버튼을 클릭하면 p값을 천천히 보여주거나 감춤

fadeOut() : ()을 서서히 감추는 기능 , fadeTo() : ()을 투명도로 변경하는 기능

sliceToggle() : 선택된 앨리먼트를 슬라이드로 감추고 보이기

기본 :.slide('slow')

값 :  slow, no marl, fast, speed(1000,2000….)

$('#button').click(function(){

$('p').slideToggle('slow',function(){

});

      });

// 버튼을 클릭하면 p값을 천천히 슬라이드로 보여주거나 감춤

 

slideDown() : ()을 아래로 슬라이드

slideUp() : ()을 위로 슬라이드

 

[출처] show&hide 내용정리입니다. (웹디들의커뮤니티카페 :: Dom FAM ::)