입력에 초점이 맞춰지면 jQuery fadeIn div?

Question

div의 innerHTML을 변경하고 양식의 입력에 초점이 맞춰지면 페이드 인하려고합니다. 페이지가로드 될 때 페이드 아웃 될 것이기 때문에 전혀 흐리게 처리되었는지 여부도 테스트하고 싶습니다.

요약하면 필자는 다른 div에 툴팁을 표시하고 입력 내용이 내 양식에 집중 될 때 페이드 인/페이 아웃과 함께 툴팁을 전환하려고합니다.

<script type="text/javascript"> 
var visible = 0; 
var nameText = "<p>May I get your<br/>full name?</p>"; 
var emailText = "<p>Could I please<br/>get your email<br/>address?</p>"; 
var messageText = "<p>What is the<br/>message you<br/>would like to send?</p>"; 

$('.inp').on("focus", function(event){ 
    if (visible == 0) 
    { 
     var fadeTime = 1; 
     visible = 1; 
    } 
    else 
     fadeTime = 500; 

    $('bubble').fadeOut(fadeTime).html(function() { 
     if ($this.attr('id') == "name") 
      return nameText; 
     else if ($this.attr('id') == "email") 
      return emailText; 
     else if ($this.attr('id') == "message") 
      return messageText; 
    }).fadeIn(500); 

}); 
</script> 

내가 자바 스크립트 오류를받을 수없는

는 여기에 지금까지 무슨이다. 거품과 입력에 대한 내 HTML은 다음과 같습니다.

<footer class="container"> 
<div class="row reveal"> 
    <div class="mailman fourcol"> 
     <img src="images/mailman.png" alt="The Mail Man" /> 
     <div id="bubble"> 
     </div> 
    </div> 
    <div class="contact eightcol last"> 

     <h1>CONTACT US FOR</h1> <h1>MORE INFORMATION</h1> 
     <div class="clear"></div> 
     <form name="contact-form"> 

      <div class="form-left"> 

       <div class="contact-name inp"> 
        <input type="text" name="name" id="name" value="Name" /> 
       </div> 

       <div class="contact-email inp"> 
        <input type="text" name="email" id="email" value="Email" /> 
       </div> 

       <div class="clear"></div> 

       <div class="contact-message inp"> 
        <input type="text" name="message" id="message" value="Message" /> 
       </div> 

      </div> 

      <div class="contact-submit"> 
       <a href=""></a> 
      </div> 

     </form> 

    </div> 
</div> 
</footer> 

Answer 1

수정했습니다. Check the demo.

주요 문제는 다음과 같습니다 : 이벤트가 입력 요소에 해고해야

1. 초점, $('.inp').on("focus", function(event){이 $('.inp').on("focus", 'input', function(event){

2. $this.attr(id)해야합니다, 당신은 var $this = $(this); 외부 놓친, 아니면 그냥 var id = this.id;를 사용 .

3. $('bubble')

   는 $(#bubble)