title: Change div opacity with mouse position
body: <p>I am trying to make an element's opacity change depending on mouse position. I found this solution here – <a href="https://stackoverflow.com/questions/15853321/changing-opacity-with-mouse-position">Changing Opacity with Mouse Position</a> – but I need one modification. I am looking for the opacity to be 0 in the vertical and horizontal <strong>center</strong> of the element. The further away from the center, the more the opacity.</p>
  
  <p>Here's my dev page: <a href="http://www.bjornfloki.com/dev/spoon" rel="nofollow">http://www.bjornfloki.com/dev/spoon</a></p>
  
  <p>I'm using the following script:</p>
  
  <pre><code>var $win = $(window),
  w = 0,h = 0,
  opacity = 1,
  getWidth = function() {
      w = $win.width();
      h = $win.height();
  };
  
  $win.mousemove(function(e) {
      getWidth();
      opacity = (e.pageX/w * 0.5) + (e.pageY/h * 0.5);
  
      $('#myElement').css('opacity',opacity);
  
  });
  </code></pre>