關於懸停，焦點和val的jQuery輸入不透明度更改

Question

我試圖在不透明度上設置輸入字段：0.8;如果鼠標位於輸入字段之上，並且輸入處於焦點狀態並且輸入中有數據，則淡出爲1.0。

如果上述任何一個條件都不成立，那麼輸入就會退回到0.8。

我已經使用了鼠標懸停/鼠標懸停和更改函​​數的混合的焦點函數，它驗證了輸入的val（），但我無法獲得所需的效果。

任何人都可以幫忙嗎？

HTML

<form id="ajax-contact-form" class="contactForm"> 
    <label>Simply type your email.</label> 
     <input class="textbox" name="email" type="text" value=""> 
     <input class="sendMessage" name="submit" value="Send Email" type="submit"> 
</form> 

CSS

.contactForm .textbox { 
    width: 564px; 
    height: 46px; 
    margin: 0; 
    padding: 0 0 0 15px; 
    font-size: 16px; 
    color: #182A76; 
    outline: 0; 
    border: 0; 
    background: url('../images/form.png') left 97% no-repeat; 
    opacity:0.8; 
    filter:alpha(opacity=80) 
    } 

JQUERY

$(document).ready(function(){ 
    $("input.textbox").mouseover(function() { 
    $('.textbox').fadeTo("slow", 1); 
}).mouseout(function() { 
    $('.textbox').fadeTo("slow", 0.8); 
}) 

if($("input.textbox").val() === "") { 
    $('.textbox').css({ opacity: 0.8}); 
} else { 
    $('.textbox').css({ opacity: 1}); 

} 

$('input.textbox').focus(function() { 
     $(this).stop().fadeTo("slow", 1); 
    }).blur(function() { 
     $(this).stop().fadeTo("slow", 0.8); 
    }); 

}）;

Answer 1

試試這個 - DEMO

$("input") 
    .on("mouseover focus", function() { 
     $(this).animate({ opacity: 1 }); 
    }) 
    .on("mouseleave blur", function() { 
     if ($(this).val() == '' && !$(this).is(":focus")) { 
      $(this).animate({ opacity: .4 }); 
     } 
    });