title: jQuery animate follow element and remove on collosion
body: <p>Im trying to make a game using Phonegap. I have created a draggable element called <code>.player</code>. I also have elements called <code>.bad-guys</code>. </p>
  
  <p>The .bad-guys animate using the basic</p>
  
  <pre><code>  $(".bad-guys").animate({
          left: '250px',
          opacity: '0.5',
      });
  </code></pre>
  
  <p>I need help to make the <code>.bad-guys</code> animate and follow the draggable <code>.player</code> and slowly get closer then <code>.remove()</code> itself once it has made contact with the <code>.player</code>.</p>
  
  <p><a href="https://jsfiddle.net/9vcyhy2r/" rel="nofollow">https://jsfiddle.net/9vcyhy2r/</a></p>
  
  <h3>UPDATE</h3>
  
  <p>So I've been experimenting with the following but have some bugs Im hoping to get some help with:</p>
  
  <pre><code>$(document).ready(function() {
  
      $( ".player" ).draggable(); 
  
      var mouseX = 0, mouseY = 0; 
      $( ".player" ).bind( "mousemove", function(e) {
         mouseX = e.pageX;
         mouseY = e.pageY; 
      });
  
      $(document).on('mousemove', '.player',  function () {       
          var follower = $(".bad-guy");
          var xp = 0, yp = 0;
          var loop = setInterval(function(){
              xp += (mouseX - xp) / 50;
              yp += (mouseY - yp) / 50;
              follower.css({left:xp, top:yp});
          }, 80);
      });
  
      makeBadguy();
      function makeBadguy() {
          var numRand = Math.floor(Math.random() * 501);
          var divsize = 800;
          var posx = (Math.random() * ($('body').width() - divsize)).toFixed();
          var posy = (Math.random() * ($('body').height() - divsize)).toFixed();
          $newdiv = $("&lt;div class='bad-guy'&gt;&lt;/div&gt;").css({
              'left': -posx + 'px',
                  'top': -posy + 'px'
          });
          $newdiv.appendTo('body').delay(2000).fadeIn(100, function () {
              makeBadguy();
          });
      } 
  
  }); // jQuery End
  </code></pre>
  
  <p>The problem, as you can see in this <a href="https://jsfiddle.net/9vcyhy2r/6/" rel="nofollow">fiddle</a> is ALL the<code>.bad-guy</code> is being referenced and causing the jumping action. How can I refer to each individual <code>.bad-guy</code> and position them accordingly?</p>
  
  <p>Here's another <a href="https://jsfiddle.net/8gge42t7/" rel="nofollow">Fiddle</a> showing one <code>.bag-guy</code> following the <code>.player</code>. How can I get all the <code>.bad-guys</code> to follow?</p>