Question

Im trying to build a function so that when users are scrolling over input fields on my form, other input fields fade out…

Ive made a fiddle so that hopefully explains what im after better, but there is a label and input in each li, when the user hovers the li, the other fields (‘li’) should become semi transparent?

http://jsfiddle.net/WR4bJ/

Not sure if this is possible but any helps great, thanks

Answer 1

I think that’s the effect you’re looking for:

JS

$('li').fadeTo(0, 0.3);
$('li').hover(function() {
    $(this).fadeTo(100, 1);
}, function() {
    $(this).fadeTo(100, 0.3);
});

HTML

<ul class="contact-form">
    <li><label>name</label><input type="text" /></li>
    <li><label>job</label><input type="text" /></li>
</ul>

Greetings!