title: Need to rotate back and forth repeatedly on hover Jquery
body: <p>Using jQuery rotate <a href="http://code.google.com/p/jqueryrotate/wiki/Examples" rel="nofollow">http://code.google.com/p/jqueryrotate/wiki/Examples</a> to animate an object from 0 degrees to 40 degrees</p>
  
  <p>Works fine on, mouseover, mouseout - but I need it to automatically loop an animation between the two points for as long as it is hovered</p>
  
  <p>Need to finish by lunch for client...HELP!</p>
  
  <pre><code>    jQuery("#leafmealonepoint").rotate({ 
       bind: 
   { 
      mouseover : function() { 
          jQuery(this).rotate({animateTo:40})
      },
      mouseover : function() { 
          jQuery(this).rotate({animateTo:0})
      }
           } 
  </code></pre>
  
  <p>UPDATE</p>
  
  <p>ok so I'm trying to use setInterval like so - what's missing?</p>
  
  <pre><code>    function move(){
         jQuery('#leafmealonepoint').rotate({animateTo:40}, function(){
         jQuery(this).rotate({animateTo:0});
         });
       }    
  
      jQuery('#leafmealone').hover(
          function() {
        hoverInterval = setInterval(move, 1000);
          },
        function(){
      clearInterval(hoverInterval);
      }
      );
  </code></pre>
  
  <p>FURTHER UPDATE</p>
  
  <pre><code>     jQuery(function(){
           var leafmealone
           jQuery('#leafmealone').mouseenter(function(){
               leafmealone = setInterval(function()
               {jQuery('#leafmealonepoint').rotate({animateTo:40},
       jQuery('#leafmealonepoint').rotate({animateTo:0}))}, 1000);
           }).mouseleave(function(){clearInterval(leafmealone);
           });
       });  
  </code></pre>
  
  <p>What am I missing?</p>