CODEWITHSUNDEEP
jqueryjquery-ui
Alex
Alex

Reputation: 1733

jQuery input opacity change on hover, focus and val

I'm trying to have an input field which is set at opacity:0.8; fade to 1.0 if the mouse is over the input field as well as if the input is in focus and if there is data in the input.

If any of the above condition aren't true, then have the input fade back to 0.8.

I've used the focus function with a mixture of mouseover/mouseout and change function which verifies the val() of the input but I can't get the desired effect.

Anyone can help?

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);
    });

});

Upvotes: 3

Views: 4660

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47687

Try this - DEMO

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

Upvotes: 4

Related Questions