집 >웹 프론트엔드 >JS 튜토리얼 >show() 및 hide() 메서드를 사용하여 Jquery_jquery에서 이미지에 애니메이션을 적용하고 숨깁니다.

show() 및 hide() 메서드를 사용하여 Jquery_jquery에서 이미지에 애니메이션을 적용하고 숨깁니다.

WBOY원래의: 2016-05-16 15:37:181536검색

(1) 기능 설명

페이지에서 "표시" 연결을 클릭하면 show() 메서드를 통해 그림이 애니메이션 방식으로 표시됩니다. 동시에 그림 클릭의 테두리 스타일을 변경하는 메서드에서 콜백 함수가 실행됩니다. 표시된 그림 때, hide()를 사용하여 애니메이션 방식으로 그림을 숨깁니다.

(2) 구현 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../jquery-2.1.4.js"></script>
<style type="text/css">
  body{font-size:13px}
  img{display:none;cursor:pointer}
</style>
<script type="text/javascript" >
  $(function(){
    $("a").click(function(){ //显示连接
      $("img").show(3000,function(){
        $(this).css("border","solid 1px #ccc");
        })
      })
      $("img").click(function(){
        $(this).hide(3000);
        })
    })
</script>

</head>

<body>
  <a href="javascript:void(0)">显示</a>
  <img  src="Images/dezai.jpg" / alt="show() 및 hide() 메서드를 사용하여 Jquery_jquery에서 이미지에 애니메이션을 적용하고 숨깁니다." >
</body>
</html>

느리게 표시되는 애니메이션

show() 및 hide() 메서드를 사용하여 Jquery_jquery에서 이미지에 애니메이션을 적용하고 숨깁니다.

jquery hide(), show() 메소드 사용법에 대한 자세한 설명

문법

$(selector).hide(속도,콜백)
속도에는 세 가지 효과 매개변수가 있습니다. • 밀리초(예: 1500)
•"천천히"
•"보통"
•"빠르게"

속도를 설정할 때 요소는 표시에서 숨김으로 이동하면서 높이, 너비, 여백, 패딩 및 투명도를 점차적으로 변경합니다.

예

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".btn1").click(function(){
 $("p").hide();
 });
 $(".btn2").click(function(){
 $("p").show();
 });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>

이것은 매우 간단한 표시 및 숨기기입니다. 효과를 적용하려면 숨기거나 표시할 시간이나 매개변수만 추가하면 됩니다.

<script type="text/javascript">
$(document).ready(function(){
 $(".btn1").click(function(){
 $("p").hide(1000);
 });
 $(".btn2").click(function(){
 $("p").show(1000);
 });
});
</script>

마지막으로 표시 및 숨기기로 얻은 표시 및 숨기기 효과를 요약합니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery_last.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function(){});
function hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
function slideToggle(){
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function show(){
$("#divObj").show();//显示,参数说明同上
}
function toggle(){
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
}
function slide(){
$("#divObj").slideDown();//窗帘效果展开
}
</script>
</head>
<body>
<h3>div里内容的显示隐藏特效</h3>
<input type="button" value="隐藏" onclick="hiden()"/>
 <input type="button" value="显示" onclick="show()"/>
 <input type="button" value="窗帘效果显示2" onclick="slide()"/>
 <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>
 <input type="button" value="隐藏显示效果切换" onclick="toggle()"/>
<div id="divObj" style="display:none">
    1.测试例子<br/>
    2.测试例子<br/>
    3.测试例子<br/>
    4.测试例子<br/>
    5.测试例子<br/>
    6.测试例子<br/>
    7.测试例子<br/>
    8.测试例子<br/>
    9.测试例子<br/>
    0.测试例子<br/>
  </div>
</body>
</html>

위 내용은 Jquery에서 show() 및 hide() 메서드를 사용하여 그림에 애니메이션을 적용하고 숨기는 내용입니다.

성명：

이전 기사：서로 전환하기 위해 3개 레이어의 중첩 클릭을 구현하는 JS 방법_javascript 기술다음 기사：서로 전환하기 위해 3개 레이어의 중첩 클릭을 구현하는 JS 방법_javascript 기술

show() 및 hide() 메서드를 사용하여 Jquery_jquery에서 이미지에 애니메이션을 적용하고 숨깁니다.

관련 기사