title: How can I improve the performance of this jquery animation code
body: <p>I've written some code that when I hover over an element, adds four arrows around it and loops an animation so that they move back and forwards.</p>
  
  <p>This is to visually show that the element is draggable. I am using the <code>hoverIntent</code> plugin to only draw the arrows when the user intends to hover over the element.  I am also using jQueryUI for the element positioning.</p>
  
  <p>Appending an item to the document and then animating it is something I have never done before and I am certain that I have coded this poorly causing the performance to be less than optimal. </p>
  
  <p>How could I go about making this code perform better?</p>
  
  <pre><code>jQuery.fx.interval = 1;
  
  // Add Hover arrows
  $('.table-row.songnamecolumn').livequery(function($songRow) {
      var $songRow = $(this).closest('tr').children('td');
      var $appenditem = $(this);
      var $this = $(this);
  
      var loop = function loop(){
          $('#toparrow').animate({ top:'-=15px'},500).animate({ top:'+=15px'},100);
          $('#bottomarrow').animate({ top:'+=15px'},500).animate({ top:'-=15px'},100);
          $('#leftarrow').animate({ left:'-=15px'},500).animate({ left:'+=15px'},100);
          $('#rightarrow').animate({ left:'+=15px'},500).animate({ left:'-=15px'},100);
      }
  
      $(this).hoverIntent({
          sensitivity: 3, // How sensitive the hoverIntent should be
          interval: 200, // How often in milliseconds the onmouseover should be checked
          over: slidedrag, // Function to call when mouseover is called    
          timeout: 200, // How often in milliseconds the onmouseout should be checked
          out: slidedragback // Function to call when mouseout is called    
      }); 
  
      function slidedrag() {  
          $('&lt;div id="toparrow"&gt;&lt;/div&gt;'
          +'&lt;div id="leftarrow"&gt;&lt;/div&gt;'
          +'&lt;div id="rightarrow"&gt;&lt;/div&gt;'
          +'&lt;div id="bottomarrow"&gt;&lt;/div&gt;').appendTo($appenditem);
  
          $('#toparrow').position ({
              of: $this,
              my: 'center top',
              at: 'center top',
              offset: "0 -18"
          })
  
          $('#bottomarrow').position ({
              of: $(this),
              my: 'center bottom',
              at: 'center bottom',
              offset: "0 18"
          })
  
          $('#leftarrow').position ({
              of: $(this),
              my: 'left center',
              at: 'left center',
              offset: "-10 0"
          })
  
          $('#rightarrow').position ({
              of: $(this),
              my: 'right center',
              at: 'right center',
              offset: "10 0"
          })
  
          $('#toparrow, #bottomarrow, #leftarrow, #rightarrow').animate({opacity:'0.5'},600);
          setInterval(loop, 600);
      }
  
      function slidedragback() {
          clearInterval(loop);
          $('#toparrow, #bottomarrow, #leftarrow, #rightarrow').animate({opacity:'0'},600);
          $('#toparrow,#bottomarrow,#leftarrow,#rightarrow').remove();
      }
  });
  </code></pre>