我正在尝试将输入字段设置为不透明度: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);
});
});
答案 0 :(得分:4)
试试这个 - DEMO
$("input")
.on("mouseover focus", function() {
$(this).animate({ opacity: 1 });
})
.on("mouseleave blur", function() {
if ( $(this).val() == '' && !$(this).is(":focus") ) {
$(this).animate({ opacity: .4 });
}
});