jquery rotate in IE7 only rotates once

I have so开发者_如何学JAVAme code as such on my website. FF, Chrome, and IE9 all works well, but in IE compatibility mode, the element only rotates once (First mouseenter), then never again until page refresh. Also seems like in IE7 compatibility mode (Not sure what version really reverts to as HTML if condition doesn't even catch it as IE7), mouseleave is not honored or goes unnoticed.

I have a haunch it is a rotate bug (or unimplemented for IE7), but to ask for second opinion, here is sample

http://jsfiddle.net/robx/wR29n/12/

This is the plugin i am using: http://jqueryrotate.googlecode.com/files/jQueryRotateCompressed.2.1.js

mouseenter and mouseleave works just fine without the rotate; tested by replacing rotate line with $(this).html("enter") and $(this).html("leave").

HTML Code:

<ul class="subMenu">
    <li>
        <a href="" id="a" title="">
            <img class="icon" src="http://www.bestfreeware.com/soft-icon/f/free-business-icons-pack-108561.jpg" alt="" />
        </a>
    </li>
    <li>
        <a href="" id="b" title="">
            <img class="icon" src="http://icons.iconarchive.com/icons/iconka/beer/48/messenger-icon.png" alt="" />
        </a>
    </li>
</ul>

Edited Fix JQuery code with Lee's update:

$(".icon").rotate({bind:{
  mouseenter: function(){
      $(this).rotate({
        angle: 0, 
        animateTo:360,
        duration: 2000
      })
  },
  mouseout: function(){
    alert('test');
  }
}
});

span, group, and image are not my doing, it is from the rotate script. I used < img /> and it was replaced (Not sure if that changes anything in IE7). Span and group were added by the rotate script.

---

I also stumbled upon this problem and after some investigating I noticed in IE the entire image tag is replaced by a series of divs, spans and other stuff. In the topmost wrapper of the rvml:image tag there is an id refering to the id of the original image. If this id is not set in the original image, this id equals null. So guess what did, I gave the image an id, and refered the jQuery rotate script to work with that particular id and it worked! Probably this also works for other elements, as long as you give the thing you want to rotate an id and use this id in the jQuery('id selector').rotate() function. This is only necassary for IE or it will run only once! In FF everything runs smoothly as expected.

Cheers!

[EDIT]

This also works for using classes instead of id's, just make sure you are refering the rotating target.

---

Try

$("a").click(function() {
    return false;
});

$(".icon").rotate({bind:{
  mouseenter: function(){
      $(this).rotate({
        angle: 0, 
        animateTo:360,
        duration: 2000
      })
  },
  mouseout: function(){
    alert('test');
  }
}
});

---

Try

$("a").click(function() {
    return false;
});
$(".icon").hover(function() {
    var anime = {
        angle: 0,
        animateTo: 360,
        easing: $.easing.easeInOutExpo,
        duration: 2000
    };
    $(this).stop(true, true).rotate(anime);
}, function(){alert("Mouse out");
});