title: Rotate on mousemove with multiple divs loop
body: <p>I'm trying to rotate multiple divs (triangles) to the mouseposition. I need to loop these because there are all moving the same when I only use one class. The problem is that it is very slow because I can't get the triangles with this line:</p>
  
  <pre><code>$('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $(".triangle'+i+'"));})})
  </code></pre>
  
  <p>I hope someone can tell me how to bind all mousemoves at once or how I can fix it.
  Thanks in advance</p>
  
  <pre><code>            for(i=0;i&lt;28; i++){
                  $('#stage').append('&lt;div class="triangle'+i+'"&gt;')
                      tri()
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle0'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle1'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle2'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle3'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle4'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle5'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle6'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle7'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle8'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle9'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle10'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle11'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle12'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle13'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle14'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle15'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle16'));})})
                  $('#stage').mousedown(function(e) {e.preventDefault(); $('#stage').bind('mousemove', function(e2) {rotateOnMouse(e2, $('.triangle17'));})})
  
  
                  }
  
  
               }
              else if ($('.triangle1').length&gt;=1) {
                  reset()
  
              }
  
    function rotateOnMouse(e, pw) {
    var offset = pw.offset();
    var center_x = (offset.left) + ($(pw).width() / 2);
    var center_y = (offset.top) + ($(pw).height() / 2);
    var mouse_x = e.pageX;
    var mouse_y = e.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) +10;
  
     $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)');
     $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)');
     $(pw).css('-o-transform', 'rotate(' + degree + 'deg)');
     $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)');
   }
  
   });  
  
   function tri(){
  
          $('.triangle'+ i).css({
                  'float':'left',
                  'left': 50 +'px',
                  'top': 50 + 'px',
                  'width': 0+'px',
                  'height': 0+'px',
  
                  'margin': 50 + 'px',
                  'cursor':'pointer',
                  'border-left': 40 + 'px solid transparent' ,
                  'border-right': 40 + 'px solid transparent' ,
                  'border-top':80 + 'px solid black' 
              })
          $('#stage').mouseup(function() {
          $('#stage').unbind('mousemove')
  
              })
          }
  </code></pre>