집 >웹 프론트엔드 >JS 튜토리얼 >jQuery의 SlideUp(), SlideDown(), hide(), show() 사용법 요약

jQuery의 SlideUp(), SlideDown(), hide(), show() 사용법 요약

巴扎黑원래의: 2017-06-29 11:03:162164검색

slideUp(speed,[callback])

높이를 변경(위로 감소)하여 일치하는 모든 요소를 동적으로 숨기고, 숨기기가 완료된 후 선택적으로 콜백 함수를 트리거합니다.

이 애니메이션 효과는 요소의 높이만 조정하고 "슬라이딩" 방식으로 일치하는 요소를 숨길 수 있습니다.

slideDown(speed,[callback])

높이 변경(아래로 증가)을 통해 일치하는 모든 요소를 동적으로 표시하고 선택적으로 표시가 완료된 후 콜백 함수를 트리거합니다.

이 애니메이션 효과는 요소의 높이만 조정하여 일치하는 요소가 "슬라이딩" 방식으로 표시되도록 합니다.

hide()

표시된 요소 숨기기

이것은 '숨기기( 속도, [ 콜백] )' 애니메이션이 없는 버전입니다. 선택한 요소가 숨겨져 있으면 이 방법은 아무 것도 변경하지 않습니다.

show()

숨겨진 일치 요소를 표시합니다.

'show(speed, [callback])'의 애니메이션이 없는 버전입니다. 선택한 요소가 표시되면 이 메서드는 아무 것도 변경하지 않습니다. 이 메소드는 hide() 메소드를 통해 요소가 숨겨졌는지 또는 CSS에 display:none이 설정되어 있는지에 관계없이 작동합니다.

<head>
<title>slideUp()和slideDown()</title>
<style type="text/css">
<!--
body{
 background:url(bg.jpg);
}
img{
 border:1px solid #000000;
 margin:8px;
}
input{
 border:1px solid #000000;
 font-size:13px; padding:2px;
 font-family:Arial, Helvetica, sans-serif;
 background-color:#FFFFFF;
 color:#000000;
}
p{
 background-color:#FFFF00;
 height:80px; width:80px;
 border:1px solid #000000;
 float:left; margin-top:8px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
 $("input:eq(0)").click(function(){
  $("p").add("img").slideUp(1000);
 });
 $("input:eq(1)").click(function(){
  $("p").add("img").slideDown(1000);
 });
 $("input:eq(2)").click(function(){
  $("p").add("img").hide(1000);
 });
 $("input:eq(3)").click(function(){
  $("p").add("img").show(1000);
 });
});
</script>
</head>
<body>
 <input type="button" value="SlideUp">
 <input type="button" value="SlideDown">
 <input type="button" value="Hide">
 <input type="button" value="Show"><br>
 <p></p><img src="test.jpg">
</body>

위 내용은 jQuery의 SlideUp(), SlideDown(), hide(), show() 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：js의 세 가지 상속 방법과 그 장점과 단점다음 기사：js의 세 가지 상속 방법과 그 장점과 단점