jQuery에서 fadeIn과 fadeOut 메서드 사용 사례

이제막들었던jQuery의fadein과fadeout메서드 사용법을 설명합니다. 여러분과 공유하고, 자세한 내용은 다음과 같습니다：

<!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>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      "$btnfadeIn".click(function () {
        "$message".fadeIn(1000);
      });
      $("#btnfadeOut").click(function () {
        $("#message").fadeOut(1000);
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnfadeIn" type="button" value="div을 애니메이션으로 숨기기" />
    <input id="btnfadeOut" type="button" value="div을 애니메이션으로 나타내기" />
  </div>
  <div id="message">
    mouseover와 mouseenter의 차이: div 안에 div가 들어 있습니다. 참고. 이벤트 버블링과 관련 있습니다.<br /> 
    마우스 포인터가 선택된 요소나 그 자식 요소를 통과할 때마다 mouseover 이벤트가 발생합니다 <br />
    마우스 포인터가 선택된 요소를 통과할 때만 mouseenter 이벤트가 발생합니다(자식 요소를 통과할 때는 발생하지 않습니다)
  </div>
</body>
</html>

jQuery와 관련된 더 많은 내용에 대해 관심이 있는 독자는 다음 사이트의 특辑을 확인할 수 있습니다：《jQuery DOM 노드 작업 방법 요약》、《jQuery 페이지 요소 작업 기술 요약》、《jQuery 일반 이벤트 사용 방법 및 기술 요약》、《jQuery 일반 플러그인 및 사용 방법 요약》、《jQuery 확장 기술 요약》、《jQuery 테이블(table) 작업 기술 요약》、《jQuery 일반 클래식 효과 요약》 및 《jQuery 선택자 사용 방법 요약》

본 문서에서 설명한 내용이 jQuery 프로그래밍에 도움이 되길 바랍니다.

성명: 본 문서의 내용은 인터넷에서 가져왔으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 본 사이트는 소유권을 가지지 않으며, 인공 편집을 하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 위반 내용을 발견하시면 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（보내는 이메일에서 #을 @으로 변경하시오）를 통해 신고하시고 관련 증거를 제공하시면, 사이트는 즉시 위반 내용을 삭제합니다.

기본 튜토리얼

좋아할 것 같은 것