3

不透明度：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);
    });

}）;

4

1 に答える 1

4

これを試してください-デモ

$("input")
    .on("mouseover focus",  function() { 
        $(this).animate({ opacity: 1 }); 
    })
    .on("mouseleave blur", function() {
        if ( $(this).val() == '' && !$(this).is(":focus") ) {
            $(this).animate({ opacity: .4 });
        }
    });
于 2012-07-30T18:30:57.167 に答える