본문 바로가기
FrameWork/jQuery

jQuery Display 메서드

by 백룡화검 2011. 9. 20.

.show(), hide(), toggle()

.show(speed,callback) // display 스타일 프로퍼티 값을 이전값(blok)으로 설정
.hide(speed,callback) // display 스타일 프로퍼티 값을 'none'으로 설정

<button class="show">show</button><button class="close">close</button>

<div id="box" style="display:none"></div>
<body>
<script type="text/javascript"> 
$('button.show').click(function(){
$('#box').show(); //speed는 1/1000초설정 및 slow,normal, fast
});
$('button.close').click(function(){
$('#box').hide();
});
</script>


.toggle(speed,callback) // 안보여졌을경우 보여지게, 보여진경우 감추는 메서드

<button class="toggle">toggle</button>
<div id="box" style="display:none"></div>
<body>
<script type="text/javascript"> 
$('button.toggle').click(function(){
$('#box').toggle("slow");
});
</script>


 

.slideDown(), .slideUp(), .slideToggle()

.slideDown(speed,callback) // 감춰진 모든 일치하는 엘리먼트가 height만큼 아래로 펼쳐져 보임

.slideUp(speed,callback) // 보여진 모든 일치하는 엘리먼트가 상단으로 사라짐

<script type="text/javascript">

$('button.show').click(function(){
$('#box').slideDown("slow");//1/1000초설정 및 slow,normal, fast

});

$('button.close').click(function(){
$('#box').slideUp("slow");//위로 좁혀지면서 사라짐
});

</script>

.slideToggle(speed,callback) // 감춰졌을경우엔 .slideDown()을 수행, 보여졌을경우엔 .slideUp()를 수행

$('button.show').click(function(){
$('#box').slideToggle("slow");
});


.fadeIn(), .fadeOut(), .fadeTo()

.fadeIn(speed,callback) // 불투명도를 0에서 100%로 조절하면서 보여짐 

.fadeOut(speed,callback) // 불투명도를 100%에서 0로 조절하면서 사라짐

<script type="text/javascript">

$('#box').fadeIn("slow");//천천히 보여짐
});
$('button.close').click(function(){
$('#box').fadeOut("slow");//천천히 사라짐

</script>
});

.fadeTo(speed, opacity, callback) // 불투명도를 현재의 값에서 opacity 매개변수 값으로 설정(0,0~1.0) 화면에서 제거되지 않음

$('button.fade').click(function(){
$('#box').fadeTo("3000","0.8");// 1/3000초로 불투명도 80%

});

 

.animate()

.animate(properties, duration, easing, callback )  
.animate(properties, options) 

<script type="text/javascript">

$("#box").animate({right: '-=200px'}, 2000); //

$('button.show').click(function(){
$('#box').stop();

</script>

.stop() // 진행하는 애니메이션을 중지.

[출처] jQuery Display 메서드|작성자 쩡이



저작자표시 비영리 동일조건

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

Easy Widgets를 이용한 정렬 순서 수정  (0) 2012.02.09
select option Add/Remove  (0) 2012.02.09
jQuery의 json을 사용할때 유용한 PHP함수  (0) 2009.12.02
JQuery 사용 하기..[라디오 버튼]  (0) 2009.11.30
jQuery 이미지 리로드  (0) 2009.11.27

관련글

티스토리툴바