Show / hide elements on mouse move
<p>I'm building a site where I want the certain sections to be hidden until the mouse is moved. They then remain visible whilst the mouse is moving, however, if it remains still for a couple of seconds they hide again.</p>

<p>I'm using jQuery on the site, in my ready state I have:</p>

<pre><code>var hide = setTimeout(function() {
    hideNav();
}, 2000);

$('body').mousemove(function() {
    clearTimeout(hide);
    var hide = setTimeout(function() {
        hideNav();
    }, 2000);
    showNav();
});
</code></pre>

<p>And the functions that show/hide content</p>

<pre><code>function hideNav() {
  $('#primary').fadeOut(1000);
  var lightbox = $('#lightbox');
  if (lightbox.length) {
    lightbox.fadeOut(1000);
  }
}

function showNav() {
  $('#primary').fadeIn(1000);
  var lightbox = $('#lightbox');
  if (lightbox.length) {
    lightbox.fadeIn(1000);
  }
}
</code></pre>

<p>This sort of works, except the timeout for hiding the elements ends up fighting with the function to show it when the mouse moves resulting in a lot of flickering.</p>

<p>EDIT: The mouse movement needs to be for anywhere on the page, not just when hovering over the element that is to be shown/hidden.</p>

<p>Any help would be appreciated.</p>

<p>Thanks</p>
