Hide element onFocus and display onBlur
<p>I have 2 form inputs where onFocus I want to hide another element on the page.</p>

<pre><code>$(document).ready(function () { 
        $('.email').focus(function () {
            $('.note').fadeTo('fast', 0);
        }).blur(function () {
            $('.note').fadeTo('fast', 1);
        });
        $('.password').focus(function () {
            $('.note').fadeTo('fast', 0);
        }).blur(function () {
            $('.note').fadeTo('fast', 1);
        });
    });
</code></pre>

<p>Pretty basic stuff, but I also need to ensure that when switching between these two inputs (.email &amp; .password) that the hidden element doesn't become visible again.</p>

<p>It seems that sometimes when I switch between them that the hidden element flickers back into view, or that the .focus event isn't being fired because the element isn't in focus for some reason.</p>

<p>Is there anyway for me to say, the .note element is hidden, if were switching between .email &amp; .password remain hidden until focus is lost from both of these elements?</p>
