jQuery의 숨겨진 디스플레이와 페이드 효과 (3)

jQuery 효과 - 숨기기 및 표시
jQuery에서는 HTML 요소를 숨기고 표시하는 데 hide() 및 show() 방법을 사용할 수 있습니다.
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
선택할 수 있는speed 매개 변수는 숨기기/표시 속도를 규정하고'slow','fast'또는 밀리초 값을 얻을 수 있습니다.선택할 수 있는 콜백 매개 변수는 완성된 후에 실행되는 함수 이름을 숨기거나 표시합니다.
인스턴스
$("button").click(function(){
  $("p").hide(1000);
});
jQuery toggle()
jQuery를 통해hide()와 show() 방법을 전환하는 toggle () 방법을 사용할 수 있습니다.
$(selector).toggle(speed,callback);
선택할 수 있는speed 매개 변수는 숨기기/표시 속도를 규정하고'slow','fast'또는 밀리초 값을 얻을 수 있습니다.선택할 수 있는 콜백 매개 변수는 toggle () 방법이 완성된 후에 실행되는 함수 이름입니다.
숨겨진 요소를 표시하고 숨겨진 요소를 표시합니다.
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").toggle(1000);
  });
});
</script>
</head>
<body>
<button>  /  </button>
<p>        。</p>
<p>          。</p>
</body>
</html>

jQuery 효과 - 페이드 아웃
jQuery를 사용하면 요소의 페이드 효과를 얻을 수 있습니다.jQuery에는 다음과 같은 네 가지 패드 방법이 있습니다.
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn()은 숨겨진 요소를 페이드하는 데 사용됩니다.
$(selector).fadeIn(speed,callback);
선택할 수 있는 speed 매개 변수는 효과의 시간을 정합니다.그것은 "slow", "fast"또는 밀리초 값을 얻을 수 있습니다.선택할 수 있는 콜백 매개 변수는fading이 완성된 후에 실행되는 함수 이름입니다.다음 예에서는 서로 다른 매개변수가 있는 fadeIn() 방법을 보여 줍니다.
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});
jQuery fadeOut() 메서드는 보이는 요소를 페이드아웃하는 데 사용됩니다.
$(selector).fadeOut(speed,callback);
선택할 수 있는 speed 매개 변수는 효과의 시간을 정합니다.그것은 "slow", "fast"또는 밀리초 값을 얻을 수 있습니다.선택할 수 있는 콜백 매개 변수는fading이 완성된 후에 실행되는 함수 이름입니다.다음 예에서는 서로 다른 매개변수가 있는 fadeOut() 방법을 보여 줍니다.
$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});
jQuery fadeToggle () 방법은fadeIn ()과fadeOut () 방법 사이를 전환할 수 있습니다.요소가 페이드아웃된 경우 fadeToggle()은 요소에 페이드 효과를 추가합니다.요소가 페이드인 경우 fadeToggle()은 요소에 페이드 효과를 추가합니다.
$(selector).fadeToggle(speed,callback);
선택할 수 있는 speed 매개 변수는 효과의 시간을 정합니다.그것은 "slow", "fast"또는 밀리초 값을 얻을 수 있습니다.선택할 수 있는 콜백 매개 변수는fading이 완성된 후에 실행되는 함수 이름입니다.다음 예에서는 서로 다른 매개변수가 있는 fadeToggle() 방법을 보여 줍니다.
인스턴스
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});
jQuery fadeTo () 방법
$(selector).fadeTo(speed,opacity,callback);
필요한 speed 매개 변수는 효과의 시간을 정합니다.그것은 "slow", "fast"또는 밀리초 값을 얻을 수 있습니다.fadeTo () 방법에 필요한 opacity 매개 변수는 페이드 효과를 지정한 불투명도로 설정합니다. (값은 0과 1 사이입니다.)선택할 수 있는 콜백 매개 변수는 이 함수가 완성된 후에 실행되는 함수 이름입니다.다음 예제에서는 fadeTo() 매개 변수가 다른 방법을 보여 줍니다.
$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

좋은 웹페이지 즐겨찾기