當輸入焦點時jQuery fadeIn div？

我試圖改變div的innerHTML，並在表單中的輸入焦點時將其淡入。我也想測試它是否已經淡入，因爲當頁面加載時它會開始淡出。總之，我基本上想要在另一個div中顯示一個工具提示，並隨着我的輸入焦點放在我的表單上，切換工具提示隨着淡入淡出而切換。當輸入焦點時jQuery fadeIn 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>

我沒有收到任何JavaScript錯誤。我的泡泡和輸入的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>

來源

2012-09-26 AJStacy

一個'div'不能有'focus'，這樣你的函數將永遠不會被調用。嘗試將'focus'的處理程序應用於輸入。 – ahren

我做了一些修復。 Check the demo.

的主要問題是：

焦點事件應輸入元素上被解僱，$('.inp').on("focus", function(event){應$('.inp').on("focus", 'input', function(event){
$this.attr(id)，你錯過了var $this = $(this);之外，或者僅使用var id = this.id; 。
$('bubble')應該$(#bubble)

來源

2012-09-26 01:50:49 xdazz

太棒了！衰落似乎正在發揮作用。最後一件事是我只需要在元素淡出後改變文本。我相信我可以從這一點解決這個問題。我很欣賞這種迴應！ – AJStacy

當輸入焦點時jQuery fadeIn div？

回答

相關問題