Question

Using jQuery rotate http://code.google.com/p/jqueryrotate/wiki/Examples to animate an object from 0 degrees to 40 degrees

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

Need to finish by lunch for client…HELP!

    jQuery("#leafmealonepoint").rotate({ 
     bind: 
 { 
    mouseover : function() { 
        jQuery(this).rotate({animateTo:40})
    },
    mouseover : function() { 
        jQuery(this).rotate({animateTo:0})
    }
         } 

UPDATE

ok so I’m trying to use setInterval like so – what’s missing?

    function move(){
       jQuery('#leafmealonepoint').rotate({animateTo:40}, function(){
       jQuery(this).rotate({animateTo:0});
       });
     }    

    jQuery('#leafmealone').hover(
        function() {
      hoverInterval = setInterval(move, 1000);
        },
      function(){
    clearInterval(hoverInterval);
    }
    );

FURTHER UPDATE

     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);
         });
     });  

What am I missing?

Answer 1

If you want to repeat that animation during mouse is on that element, you need a setInterval(), or this will execute animation once and will stop when completed, then mouse leave will execute again and stop again.

edit: Also you have 2 mouseover event, i think it’s typo to hover you need a mouseout, or use hover() directly.