title: JavaScript function only affects first div with class
body: <p>I have part of a game where the cursor is supposed to "slow down" when it passes over certain divs. I'm using a function that can detect a collision with the div. This works fine when the cursor meets the first div, but it doesn't work at all on the second div.</p>
  
  <p><a href="https://jsfiddle.net/5sy1tg36/">Check out this jsFiddle</a> for a better idea of what I'm talking about. Pass the cursor over the first white block (<code>class='thing'</code>) on the left and it slows down. Pass the cursor over the other block (also <code>class='thing'</code>), and nothing happens. I need this collision function to work on all divs where <code>class='thing'</code>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id='cursor'&gt;
              &amp;nbsp;
          &lt;/div&gt;
          &lt;div class='thing' style='width:70px; height:70px; background: #fff; position: absolute; bottom: 350px; right: 800px; z-index: -1;'&gt;
              &amp;nbsp;
          &lt;/div&gt;
          &lt;div class='thing' style='width:70px; height:70px; background: #fff; position: absolute; bottom: 200px; right: 400px; z-index: -1;'&gt;
              &amp;nbsp;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>(function collide(){
  var newInt = setInterval(function() {
  function collision($cursor, $thing) {
      var x1 = $cursor.offset().left;
      var y1 = $cursor.offset().top;
      var h1 = $cursor.outerHeight(true);
      var w1 = $cursor.outerWidth(true);
      var b1 = y1 + h1;
      var r1 = x1 + w1;
      var x2 = $thing.offset().left;
      var y2 = $thing.offset().top;
      var h2 = $thing.outerHeight(true);
      var w2 = $thing.outerWidth(true);
      var b2 = y2 + h2;
      var r2 = x2 + w2;
  
      // change 12 to alter damping higher is slower
      var varies = 12;    
  
      if (b1 &lt; y2 || y1 &gt; b2 || r1 &lt; x2 || x1 &gt; r2){
      } else {
      varies = 200;
      console.log(varies);
      }
  $xp += (($mouseX - $xp)/varies);
      $yp += (($mouseY - $yp)/varies);
      $("#cursor").css({left:$xp +'px', top:$yp +'px'}); 
  
  }
  
  $(collision($('#cursor'), $('.thing')));
  //$('.result').text(collision($('#cursor'), $('.thing')));
  
  }, 20);
  })();
  </code></pre>